css 溢出 - 只有 1 行文本

Posted 2023-03-06

【中文标题】css 溢出 - 只有 1 行文本

【英文标题】：css overflow - only 1 line of text

【发布时间】：2011-11-24 16:09:52

【问题描述】：

我有 div 具有以下 css 样式：

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

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

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

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

我该怎么做？

【问题讨论】：

你能在jsFiddle上演示你的问题吗？

【参考方案1】：

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

【讨论】：

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

很好用。但是如果要显示更多字符，我需要...，因为当行长超出写入的 div 时。

如果隐藏文本包含超链接，这会很奇怪。如果我要在页面中使用标签，它会导致隐藏文本中的链接滚动到屏幕上，当它应该被隐藏时。

感谢我的 wordpress 网站需要这个。

【参考方案2】：

如果您想表明该 div 中还有更多可用内容，您可能需要显示“省略号”：

text-overflow: ellipsis;

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

另外，请务必签出 this thread 以在 Firefox 中处理此问题。

【讨论】：

我相信您必须使用 text-overflow: ellipsis; 与 overflow: hidden; 和 white-space: nowrap; 才能使其工作

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

我的只显示在一行中，在显示省略号之前不填充 DIV...***.com/questions/26342411/… (jsfiddle.net/ofrj55j4/20)

【参考方案3】：

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

display: inline-block;

在有问题的div 上。

【参考方案4】：

你可以使用这个css代码：

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

CSS 中的 text-overflow 属性处理文本溢出元素框时被剪切的情况。它可以被剪裁（即切断、隐藏），显示一个省略号（'...'，Unicode Range Value U+2026）。

请注意，text-overflow 仅在容器的溢出属性值为 hidden、scroll 或 auto 时发生> 和 white-space: nowrap;.

文本溢出只能发生在 block 或 inline-block 级别的元素上，因为元素需要有宽度才能溢出。溢出发生在方向属性或相关属性确定的方向上。

【讨论】：

这对我来说更加完美。谢谢

【参考方案5】：

UX 和 UI 的最佳代码是

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

【参考方案6】：

如果添加请，如果您有很长的文字，请使用下面的css代码；

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

使整行文本可见。

【参考方案7】：

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

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

【参考方案8】：

我能够通过使用 webkit-line-clamp 和以下 css 来实现这一点：

div 
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;

【讨论】：

line-clamp 并没有很好的跨浏览器支持：caniuse.com/?search=line-clamp