CSS-使用省略号自动缩短长字符串[重复]答案

【问题标题】：CSS- Automatically shorten long strings using ellipsis [duplicate]CSS-使用省略号自动缩短长字符串[重复]
【发布时间】：2017-05-12 17:00:56
【问题描述】：

您好，我正在使用省略号缩短长字符串并将 dotes(...) 放在末尾。问题是如果一个字符串包含空格，那么我想先打破字符串，然后如果它溢出然后放 dotes(...)。例如。我有两个字符串

Choreographers  Farm Houses

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

当我使用省略号时，我会在调整窗口大小时得到

Choreogra...    Farm Ho...

我想要的是

Choreogra...      Farm
                  Houses

如果屏幕更小

Chore...         Farm
                 Hous...

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

【问题讨论】：

text-overflow: ellipsis; 仅适用于单行。
@connexo 好的，谢谢...有可能实现我想要的吗？？

标签： html css

【解决方案1】：

删除white-space: nowrap ...尽管text-overflow 浏览器对多行的支持不好

Updated fiddle

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

查看这篇帖子，applying-an-ellipsis-to-multiline-text，在那里你会发现更多方法

【讨论】：

【解决方案2】：

你应该写“Farm&nbsp;Houses”而不是写“Farm Houses”，这样它就可以达到你想要达到的效果。该解决方案还解决了浏览器对white-space: nowrap 或 text-overflow 的不良支持

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

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

【讨论】：

【解决方案3】：

很遗憾，text-overflow: ellipsis 只会截断单行。

但是您可以在这里使用line-clamp，它应该适用于 webkit 浏览器和 Firefox。

在这里，您提到了在 -webkit-line-clamp 和 -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-("...") 方式。

【讨论】：