Question

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

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

HTML：

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

风格：

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

我希望看到没有＆＃34; Boom＆＃34;或者代替Hello Boom - Hel ......

Answer 1

您好我面临同样的问题，如果您的文字在一行中，那么文字溢出工作正常，但现在您做了不同的事情，即您想要 ...... 4之后5行所以你必须在高度上应用省略号。

见这个例子：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

正如您在上面的例子中看到的那样-webkit-line-clamp：5;所以它会在5行添加....

注意：什么是 -WebKit

WebKit是Safari / Chrome的HTML / CSS网络浏览器渲染引擎。

网络浏览器的渲染引擎列表

的 IE

引擎：[Trident] [2]

CSS-prefix：-msie

的火狐

引擎：[Gecko] [3]

CSS-prefix：-moz

的戏

发动机：[Presto] [4]

CSS-prefix：-o

Safari＆amp;铬

引擎：[WebKit] [5]

CSS-prefix：-webkit

因此 Safari / Chrome 在 css 中使用 -webkit 以及其他浏览器使用 css-prefix ，如上所述

Answer 2

尝试：

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

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

使用css限制div中的字符数

2 个答案: