css - 截断文本并在 CSS 中添加省略号

Question

我试图截断一段文本并在其后添加省略号以指示还有更多内容。

我尝试使用 CSS 属性 text-overflow:ellipsis - 但是看看这个例子似乎只有使用 no-wrap 才有可能因此它只能用于单行文本，因此不适合截断段落。

然后我想出了另一种解决方案，几乎是正确的，但只有一个问题...

因此，我没有使用 ellipsis 属性进行截断，而是使用 overflow:hidden 并设置 max-height 来截断老式的方式

.tourItem .tourInfo
{
max-height: 110px;
overflow: hidden;
display: block;
}

然后为了创建简洁的省略号，我使用了 :after

.tourItem .tourInfo:after {content:'...';}

这似乎是正确的方法，但是我遇到了两个问题......

1. overflow:hidden 表示:after 内容不显示。但它是必需的，因为它控制截断的文本!
2. 省略号(如果您去掉 overflow:hidden)显示在文本部分下方。我需要它看起来像是文本行的一部分...

JS Fiddle to help

Answer 1

查看 JSFiddle Link ，其中省略号仅使用 CSS 添加到段落中。您可以根据要求/需要自定义背景。

代码如下:

.tourItem {
  position: relative;
  font-family: sans-serif;
  display: block;
  width: 244px;
  height: 7em;
  overflow: hidden;
}

.tourItem .tourInfo {
  color: #333;
  padding: 20px;
  width: 204px;
  overflow: hidden;
  background: #E0E0E0;
  font-size: .95em;
  line-height: 1;
  text-align: justify;
}

.tourItem .tourInfo:after {
  content: ' ';
  position: absolute;
  display: block;
  width: 100%;
  height: 1em;
  bottom: 0px;
  left: 0px;
  background: #E0E0E0;
}

.tourItem .tourInfo:before {
  content: '...';
  text-align: right;
  position: absolute;
  display: block;
  width: 2em;
  height: 1em;
  bottom: 1em;
  right: 20px;
  background: -moz-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224, 224, 224, 0)), color-stop(38%, rgba(224, 224, 224, 1)), color-stop(99%, rgba(224, 224, 224, 1)));
  background: -webkit-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -o-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -ms-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#e0e0e0', GradientType=1);
}

<div class="tourItem ">
  <div class="tourInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>