Question

我想在html页面中截断文本。

的style.css：

p {
 height: 30%;
 overflow: hidden;
 text-overflow: ellipsis;
}

的index.html

<p>
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>

我想得到一个结果：

hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhh...

但我无法使用下面提到的style.css获得此结果。我该如何解决？

Answer 1

CSS规则word-wrap: break-word;会强制像你这样的长词在div的末尾打破。您还可以限制div的宽度，使其具有与您发布时类似的效果。

＆＃13;

p {
  height: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  width: 200px;
}

＆＃13;

<p>
 hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>

＆＃13;

Answer 2

你可能正在寻找这个

＆＃13;

p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    height:56px;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>

＆＃13;

注意：它仅适用于webkit浏览器

Answer 3

当预计会引入会破坏布局的长字时，通常会使用以下内容。

[a-zA-Z\x43-_#@.:;/\\=!^() ]+

这将导致任何两个字符之间的线条断开。您也可以使用：

p { overflow-wrap: break-word }

...如果您希望将中文，日文和韩文插入该字段中。

Answer 4

使用Bootstrap：

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
  <span class="d-inline-block text-truncate" style="max-width:150px;">
    Praeterea iter est quasdam res quas ex> communi.
</span>

会给您：

Praeterea it ...

Praeterea iter est q ...

更多信息： Bootstrap Text

如何截断html中的文本

4 个答案: