CSS溢出-仅1行文字

134

我有div以下css样式：

width:335px; float:left; overflow:hidden; padding-left:5px;

当我在其中插入div一长行文本时，它会换行并显示所有文本。我想要的是只有一行不会换行的文本。当文本较长时，我希望此溢出文本消失。

我当时正在考虑设置高度，但这似乎是错误的。

也许如果我添加与字体相同的高度，它应该可以工作并且不会在不同的浏览器中引起任何问题？

我怎样才能做到这一点？

html css overflow

— 本垒打
source

您可以在jsFiddle上演示您的问题吗？

— 哈里·乔伊

352

如果要将其限制为一行，请white-space: nowrap;在div上使用。

— 七月
source

但是，如果文本超出指定的尺寸，则不会显示省略号。stackoverflow.com/questions/26342411/...

— SearchForKnowledge

很好，很好。但是我需要...显示更多字符，因为当行长变长并且超出了div的范围时。

— Moshii's

如果隐藏的文本包含超级链接，则此行为很奇怪。如果要在页面上切换，则应将隐藏文本中的链接滚动到屏幕上，以防止其隐藏。

— 艾瑞克（Eric）

76

如果要指示该div中还有更多内容可用，则可能要显示“省略号”：

text-overflow: ellipsis;

这应该是white-space: nowrap;Septnuits建议的补充。

另外，请确保签出该线程以在Firefox中进行处理。

— 牟利
source

47

我相信你必须使用text-overflow: ellipsis;同overflow: hidden;和white-space: nowrap;，使其工作

— 弗朗西斯科·科斯塔

caniuse.com/#feat=text-overflow aka。是的你可以。考虑将整个内容放在title属性中，以便用户仍然可以访问它。

— DanMan

矿山只是显示在同一行，并显示省略号......之前不填充DIV stackoverflow.com/questions/26342411/...（jsfiddle.net/ofrj55j4/20）

— SearchForKnowledge

43

您可以使用以下CSS代码：

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

CSS中的text-overflow属性用于处理文本溢出元素框时被剪切的情况。可以将其剪裁（即切除，隐藏），显示省略号（“ ...”，Unicode范围值U + 2026）。

请注意，仅当容器的溢出属性的值具有hidden，scroll或auto以及white-space时，才发生文本溢出。。

文本溢出只能在块级或内联块级元素上发生，因为元素必须具有宽度才能被溢出。溢出发生在由direction属性或相关属性确定的方向上。

— 高拉夫·特里帕蒂（Gaurav Tripathi）
source

6

UX和UI的最佳代码是

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

— 奥米德·艾哈迈迪亚尼（Omid Ahmadyani）
source

0

如果需要加法，如果文本较长，则可以使用以下CSS代码；

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

使整行文本可见。

— Shafii Muhudi
source

0

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

还定义宽度以在一行中设置溢出

— 杰伊迪普·卡塔里亚（Jaydeep Kataria）
source

-2

我有同样的问题，我使用以下方法解决了：

display: inline-block;

对div有问题。

— 德科努
source