当单词打断多行时，修剪给定空格的字符串

Question

我有一个侧边栏，我想在其中给标题和描述最多两行。但是，跨度的高度应始终为两行长，以便具有相同的垂直对齐。此外，我不希望最后一个单词被破坏，它应该用...代替它。例如，如果最后一个单词不能放在给定的空格中，它不应该只是把单词分解到下一行，相反，它应该看起来像这个this is my descirpti...。

这个词应该被剪切并加上...。

此外，是否可以在文本被剪切的每个div中添加一个类？我想为那些箱子设计一种特别的款式！

我想用CSS属性text-overflow来解决这个问题

.max-width-200 {
max-width: 900px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
}
.heading-wrapper ,.description-wrapper {
height: 50px
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">   
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, its not very long</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
<hr>
<div class="row max-width-200">
<div class="col-3">
<img src="https://picsum.photos/180">   
</div>
<div class="col-7 d-flex flex-wrap">
<div class="col-12 no-padding align-self-start heading-wrapper">
<span>This is my heading, Its longer then it should be.. someone fucked it up. Please fix me to be only two rows long!</span>
</div>
<div class="col-12 no-padding align-self-center description-wrapper">
<span>This is my description. This description is longer then it should be. It should only be two rows large but unfortuntly its longer then two rows.</span>
</div>
</div>
</div>
</div>

Answer 1

您可以使用：

span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

通常text-overflow: ellipsis;需要设置一个white-space属性才能工作。请参阅：https://stackoverflow.com/a/7680712/8177490

在使用之前，您还应该检查浏览器的兼容性。

如果不希望标题受到影响，请将其标记从span更改为p或某些h标记。