Question

我想在字符串的末尾添加3个点，这些点不能适合父母所拥有的高度，我尝试使用省略号但是当宽度是固定部分时它才起作用而不是高度。当没有换行符时，换行符是此问题的重要部分，无法删除它们：（。

＆＃13;

#somediv{
  min-width: 100%; /*It's important to keep the width as 100%*/
  max-width: 100%;
  min-height: 50px;
  max-height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #eeeeee;
}

＆＃13;

<div id="somediv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem
  <br>
  consectetur corporis eaque laboriosam praesentium temporibus? Accusamus         <br>
  consequatur deserunt, dolorum eaque facere inventore labore mollitia possimus,   <br>
  quia quo, veniam.
  <br>
  br tags are some important part of the example  
  <br>
  As you can see the text is trimmed, 
  Without the br tags the text would be in a single line and dot's would be displayed
</div>

＆＃13;

如果CSS不够，您可以使用javascript建议解决方案，或者如果您更喜欢jQuery

Answer 1

1- Webkit line clamb可以帮助您是的！浏览器支持不好

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

为你的someDiv

#somediv {
    min-width: 100%;
    max-width: 100%;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    border: 1px solid #eeeeee;
}

2-另一种纯Css解决方案

<div class="block-with-text">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</div>


.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em; 
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
  width:80%;
}

.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

https://jsfiddle.net/pz03jur2/

CSS添加＆＃34;垂直＆＃34;字符串末尾的点

1 个答案: