溢出:末尾隐藏的圆点

假设我有一个字符串“我喜欢大屁股，我不能说谎”，我用overflow:hidden来切割它，所以它会显示这样的东西:

我喜欢大屁股，我可以

剪掉文字。是否可以这样显示:

我喜欢大屁股，我可以…

使用CSS呢?

当前回答

如果你想把线条限制在3条以内，那么试试这个方法，在3条线之后，点就会出现。如果我们想增加线条，只需改变-webkit-line-clamp值，并给出div size的宽度。

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

2018-05-28 06:10:21

其他回答

希望这对你有帮助:

.text-with-dots { 显示:块; max-width: 98%; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; ｝ <div class='text-with-dots'>这里有一些文本这里有一些文本这里有一些文本这里有一些文本这里有一些文本这里有一些文本</div>

2019-01-15 12:25:19

.cut-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

2022-06-06 14:39:54

是的，通过css3中的text-overflow属性。注意:它还没有被浏览器普遍支持。

2009-01-28 05:29:31

你可以使用text-overflow: ellipsis;根据caniuse的说法，所有主流浏览器都支持这个功能。

这是jsbin上的一个演示。

.cut-text { 文本溢出:省略; 溢出:隐藏; 宽度:160 px; 高度:1.2 em; 空白:nowrap;} ｝ < div class = "剪切文本”> 我喜欢大屁股，我不会撒谎。 < / div >

2009-01-28 05:29:32

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

2019-11-12 06:55:13

溢出:末尾隐藏的圆点

推荐文章

最新文章

标签