尝试在设置为max-width后截断字符。在这种情况下我使用了75ch

p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>

如需多行截断，请按此链接。

示例:https://codepen.io/srekoble/pen/EgmyxV

我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。

示例代码:

.limited-text { 空白:nowrap;} 宽度:400 px; 溢出:隐藏; 文本溢出:省略; ｝ <p class="limited-text">我爱你，我爱你。时间和欲望是错误的，是腐败的，是幸福的!</p> .</p

这在CSS中是不可能的，你必须使用Javascript。虽然你可以设置p的宽度为30个字符，下一个字母会自动下来，但这不会那么准确，如果字符是大写的，会有所不同。

75个字符

我已经尝试了最大宽度，但这打乱了我的布局。

使用max-width: 75ch，然后创建一个布局，当你超过这个宽度时不会乱。

尝试在设置为max-width后截断字符。在这种情况下我使用了75ch

p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：75通道; } <p>Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。Lorem ipsum dolor sit amet， consectetur adipiscing elit.Proin nisi ligula， dapibus a volutpat sit amet， mattis 等。</p>

如需多行截断，请按此链接。

示例:https://codepen.io/srekoble/pen/EgmyxV

我们将为此使用webkit css。总之，WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。这可能是特定于浏览器的，因为每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。

在Chrome浏览器中，你可以使用"-webkit-line-clamp"来设置显示的行数:

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

所以对我来说，它是在一个扩展使用，所以它是完美的，更多信息在这里:https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5