10

我正在尝试截断一段文本并在后面添加省略号以表示有更多内容。

我尝试使用 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 来帮忙

4

6 回答 6

3

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

于 2014-12-10T04:46:39.640 回答
1

您可以使用 -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>

于 2017-02-12T04:41:56.337 回答
0

我交换了一些样式，它的工作原理是这样的！我将max-heightandoverflow移至<p>标签而不是 div。这样 div 会自动获取段落的正确高度，现在您可以在 :after 上使用，并在悬停div时隐藏。: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/

希望这可以帮助你！

于 2013-07-18T10:28:32.870 回答
0

我想你需要 wrap 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;
}

这可能会有所改进，但你明白了。

于 2013-07-18T10:28:44.333 回答
0

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

https://github.com/AlirezaAsadi/truncatie

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

用法x

  $('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..
于 2015-11-06T03:39:54.837 回答
-1

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

<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;
}
于 2013-07-18T10:08:21.763 回答