在 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>

Answer 2

你可以使用-webkit-line-clamp，这是一个webkit/blink浏览器私有属性

.ellipsis1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

<div class='ellipsis1'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

如果您想自定义省略号文本，请使用此纯 css 方法：

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Answer 3

我认为您需要包装tourInfo。这样您就可以给tourInfo 一个百分比宽度，以便为省略号留出空间。

HTML

<div class="bacon">
    <span class="tourInfo">
               <p>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.</p>
          </span>
</div>

CSS

.bacon{
    width: 150px;
    position: relative;
}

.tourInfo{
    height: 110px;
    width: 85%;
    display: block;
    overflow: hidden;
}

.tourInfo:after{
    content: '...';
    position: absolute;
    bottom: -3px;
    right: 18px;
}

这可能会稍微改进一下，但你明白了。

Answer 4

我换了一些样式，效果是这样的！我将max-height 和overflow 移动到<p> 标签而不是div。这样，div 会自动获取段落的正确高度，现在您可以在 div 上使用 :after，并在悬停时隐藏 :after。在此旁边，我还将“点”定位在正确的位置。

CSS

.tourInfo {
    width:150px;
    display: block;
}

.tourInfo:after { /* position the dots */
     position:relative;
     background-color:white;
     left:138px;
     top:-16px;
    content:'...';
}
.tourInfo p{
    color:#666;
    font-size:13px;
    font-weight:normal;
    display:block;
    margin:0;
    overflow:hidden; /* overflow hidden on the <p> instead of the div */
    max-height: 110px;
}

.tourInfo:hover:after {
    display:none; /* hide after on hover */
}

.tourInfo:hover p {
    max-height:100%; /* change max-height on hover */
}

小提琴

http://jsfiddle.net/jPM4R/3/

希望对你有所帮助！

Answer 5

我刚刚制作了一个用于截断 HTML 容器内的文本的 jquery 插件：

https://github.com/AlirezaAsadi/truncatie

Truncatie 是一个 jquery 插件，可以在 html 容器中按行限制文本的大小

用法

  $('big-text').truncatie({
       elipsis: '...',
       max: 2 /* Number of lines limitation */
   });

#输入

 Truncatie is a jquery plugin
 that limit size of text by 
 lines within a html container

# 输​​出

 Truncatie is a jquery plugin
 that limit size of text by..

Answer 6

你有没有尝试过做这样的事情？

<div class="content-ovh">
   <p class="text">Your text</p>
   <a href="#">More</a>
</div>

还有风格：

.content-ovh .text{
    witdh: yoursize px;
    height: yoursize px;
    overflow:hidden;
}