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:'...';}

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

overflow:hidden表示:after内容未显示。但它是必需的，因为它控制截断的文本！
省略号（如果您取消overflow:hidden）显示在文本部分下方。我需要它看起来像它是文本行的一部分......

JS Fiddle to help

Answer 1

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

以下是代码：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

我交换了一些样式，它就像这样！我已将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 */
}

<强> FIDDLE

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

希望这会帮助你！

Answer 3

你可以使用-webkit-line-clamp，它是一个webkit / blink brower私有财产

.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 4

我认为你需要包裹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 5

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

https://github.com/AlirezaAsadi/truncatie

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

<强> usagex

  $('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

#Outeput

 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;
}

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

6 个答案: