使用css限制div中的字符数答案

【问题标题】：limit number of characters in div using css使用css限制div中的字符数
【发布时间】：2016-01-03 09:31:08
【问题描述】：

我有带有溢出的div：隐藏和一些文本，最后一行在中途可见。我应该怎么做才能从 div 中隐藏最后一行？甚至添加一些省略号。

是否可以仅使用 css 来执行此操作？（我不想改变字体大小，或者改变显示：隐藏）

html:

<div>
    Hello World, Hello World, Hello Booom
</div>

风格：

div {
    height:100px;
    width:50px;
    overflow:hidden;
    border:1px solid black;
}

我希望看到所有没有“Boom”或Hello Boom - Hel...的文本...

【问题讨论】：

更改字体大小？改变盒子大小？改变溢出？使用 js 计算可见的内容并去除其余部分？有很多方法。猜你需要更具体。
您想要带有“阅读更多”/“阅读更少”按钮的省略号吗？
试试这个jsfiddle.net/xp32ekqc/1
@Pearson 怀疑这对于 OP 是否可用，因为 -webkit-line-clamp: 3; 是一个固定数字并且内容看起来不是静态的。
css ellipsis on second line 和 see this answer 的可能重复

标签： html css

【解决方案1】：

您好，我也面临同样的问题，如果您的文本在一行中，那么 文本溢出 工作正常，但现在您正在做一些不同的事情，即您想要 ...... 在 4 或5 行，因此您必须在高度上应用省略号。

看这个例子：

div {
    height:90px;
    width:50px;
    overflow:hidden;
    border:1px solid black;
}

.myDiv{
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="myDiv">
    Hello World, Hello World, Hello Booom
</div>

正如你在上面的例子中看到的 -webkit-line-clamp:5;所以它会在第 5 行添加 ....。

注意：什么是-WebKit

WebKit 是一个用于 Safari/Chrome 的 HTML/CSS 网页浏览器渲染引擎。

网页浏览器渲染引擎列表

IE
- 引擎：[三叉戟][2]
- CSS 前缀：-msie
火狐
- 引擎：[Gecko][3]
- CSS 前缀：-moz
歌剧
- 引擎：[Presto][4]
- CSS 前缀：-o
Safari 和 Chrome
- 引擎：[WebKit][5]
- CSS 前缀：-webkit

所以对于 Safari/Chrome 使用 -webkit 在 css 和其他浏览器使用上面提到的css-prefix

【讨论】：

【解决方案2】：

试试：

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

在你的 CSS 中。我希望你对此有所帮助。我附上了 jsfiddle 的链接：JSFiddle Demo

【讨论】：

作为 Stack Overflow 上的一个小组，我们希望您的回答集中在回答问题上，而省略诸如“你好”之类的不必要的花言巧语。同样，为了改进您的答案，将您的代码清晰地格式化为代码将是有益的。你还应该花时间描述你的答案是如何工作的，以及它是如何解决问题的；这样，未来的 OP 和其他人可能会从中学到一些有用的东西。