Question

嗨，我正在使用省略号缩短长字符串并在末尾放置点（...）。问题是如果一个字符串包含空格，那么我想首先打破字符串然后如果它溢出然后放入dotes（...）。例如。我有两个字符串

Choreographers  Farm Houses

如果我不使用省略号，那么在调整窗口时，编舞者会重叠农庄...

当我使用省略号然后调整大小窗口时我得到

Choreogra...    Farm Ho...

我想要的是

Choreogra...      Farm
                  Houses

如果屏幕更小

Chore...         Farm
                 Hous...

小提琴： https://jsfiddle.net/7fpt4m5e/3/

Answer 1

删除white-space: nowrap ...虽然text-overflow浏览器支持多行

Updated fiddle

.block2 p {
  overflow:hidden;
  text-overflow:ellipsis;
  width:98%;
}

查看此帖applying-an-ellipsis-to-multiline-text，您会发现更多方法

Answer 2

而不是写“农庄”，你应该写“Farm Houses”，这样就可以达到你想要达到的效果。此解决方案还解决了white-space: nowrap或文本溢出

的浏览器中的错误支持

https://jsfiddle.net/7fpt4m5e/6/

适用于所有浏览器，因为它不需要特殊支持。

Answer 3

不幸的是，text-overflow: ellipsis只会截断单行。

但是，你可以在这里做的是使用line-clamp，它应该适用于webkit浏览器＆amp; Firefox浏览器。

在这里，您要提到在-webkit-line-clamp＆amp;中发生截断后所需的行数。 -moz-line-clamp。

line-clamp用法的示例是：

div {
  max-height: 42px;
  width: 40px;
  margin-bottom: 10px;
  font-size: 16px;
  overflow: hidden;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
}

<div>the quick brown fox jumps over the lazy dog</div>
<div>the quick brown fox jumps over the lazy dog</div>

否则，您也可以使用handle-your-own-pseudo-selectors-with-content - （“...”）方式。

CSS-使用省略号自动缩短长字符串

3 个答案: