如果使用CSS溢出,如何在固定高度块的末尾设置省略号?

时间:2019-02-23 11:27:32

标签: javascript html css

.desc{
	font: 16px normal;
	text-align: justify;
	height: 70px;
	line-height: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
<p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

我正在尝试省略号而不是溢出内容。其实我想查看一些内容。如果高度太长,那么我就隐藏了溢出,并使用CSS和HTML替换为...。我对上面的CSS感到厌倦并且与...处于一行,但我希望在块内容的末尾使用省略号。 而且我也尝试过js

$('.desc').each(function() {
  var $p = $(this);
  var divh = $('.desc').height();
  while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }
});

0 个答案:

没有答案