css 希望显示< p>文本在3行左对齐和其余的文本作为省略号

jdzmm42g 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(161)

希望显示<p>文本在3行左对齐和其余的文本作为省略号（请参考所需的输出图像）。但目前下面的css显示在单行与省略号如下。有人能请建议如何使文本显示在3行和其余的省略号？

实际产量：

.textElipsis {
  width: 250px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}

<p class='textElipsis'>
  Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
  <div>
    <code>{textCode}</code>
  </div>
</p>

预期产出：

css

来源：https://stackoverflow.com/questions/75342196/wish-to-display-p-text-in-3-line-with-left-align-and-rest-of-the-text-as-ellip

2条答案

按热度按时间

nwnhqdif1#

您可以使用-webkit-line-clamp来完成此操作。
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
有关浏览器支持，请参阅：
https://caniuse.com/?search=line-clamp
另外请注意，您不能将div放在p标记中。它不是有效的html。
List of HTML5 elements that can be nested inside P element?

.textElipsis {
  width: 250px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px dashed tomato;
}

.code {
  display: block;
}

<p class='textElipsis'>
  Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
  <code class="code">{textCode}</code>
</p>

赞(0）回复(0）举报 2023-02-06

zujrkrfu2#

您可以使用line-clamp来实现此目的。

.textElipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

但不是所有的浏览器都支持它，你可以试试，也可以用Clamp.js来做同样的事情。

赞(0）回复(0）举报 2023-02-06

我来回答

css 希望显示< p>文本在3行左对齐和其余的文本作为省略号

2条答案

相关问题

热门标签

最新问答