首页 文章

使用CSS将文本长度限制为n行

提问于
浏览 次
371

是否可以使用CSS将文本长度限制为“n”行（或者在垂直溢出时将其剪切） .

text-overflow: ellipsis; 仅适用于1行文本 .

原文：

Ultrices natoque mus mattis，aliquam，cras in pellentesque tincidunt elit purus lectus，vel ut aliquet，elementum nunc nunc rhoncus placerat urna！坐下来看看！ Ut penatibus turpis mus tincidunt！ Dapibus sed aenean，magna sagittis，lorem velit

想要输出（2行）：

Ultrices natoque mus mattis，aliquam，cras in pellentesque tincidunt elit purus lectus，vel ut aliquet，elementum ...

css text overflow ellipsis

11 回答

  • 425

    有一种方法，但它只是webkit . 但是，当您将其与 line-height: X; 和 max-height: X*N; 结合使用时，它也可以在其他浏览器中使用，只是没有省略号 .

    .giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

    演示：http：//jsfiddle.net/csYjC/1131/

    回复于
  • 71

    你能做的是以下几点：

    .max-lines {
  display: block; /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

    其中 max-height: = line-height: × <number-of-lines> 在 em 中 .

    回复于
  • 2

    据我所知，这可能只使用 height: (some em value); overflow: hidden ，即便如此，它最终也不会有花哨的 ... .

    如果这不是一个选项，我认为没有一些服务器端预处理（很难，因为文本流不可能可靠地预测）或jQuery（可能但可能复杂）是不可能的 .

    回复于
  • -10

    Working Cross-browser Solution

    多年来这个问题困扰着我们所有人......

    为了在所有情况下提供帮助，我已经列出了仅CSS方法，以及jss方法，以防css警告出现问题 .

    这是我提出的一个解决方案，它适用于所有情况，但有一些小问题 .

    基础很简单，它隐藏了 Span 的溢出，并根据Eugene Xa建议的线高设置最大高度 .

    然后在包含div之后有一个伪类，它可以很好地放置省略号 .

    Caveats

    无论是否需要，此解决方案将始终放置省略号 .

    如果最后一行以结尾的句子结束，你最终会得到四个点......

    您需要对合理的文本对齐感到满意 .

    省略号将在文本的右侧，看起来很草率 .

    Code + Snippet

    jsfiddle

    .text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

    <div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

    jQuery Approach

    在我看来，这是最好的解决方案，但不是每个人都可以使用JS . 基本上，jQuery将检查任何.text元素，如果有比预设的max var更多的字符，它将关闭其余部分并添加省略号 .

    这种方法没有任何警告，但是这个代码示例仅用于演示基本思想 - 我不会在 生产环境 中使用它而不改进它有两个原因：

    1）它将重写.text elems的内部html . 是否需要 . 2）没有测试检查内部html没有嵌套元素 - 所以你很依赖作者正确使用.text .

    已编辑

    Thanks for the catch @markzzz

    Code & Snippet

    jsfiddle

    setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

    .text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->
    回复于
  • 15

    this thread的解决方案是使用jquery插件dotdotdot . 不是CSS解决方案，但它为"read more"链接，动态调整大小等提供了很多选项 .

    回复于
  • 0

    目前你不能，但将来你将能够使用 text-overflow:ellipis-lastline . 目前它在Opera 10.60中提供供应商前缀：example

    回复于
  • 29

    以下CSS类帮助我获得了两行省略号 .

    .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }
    回复于
  • 0

    我有一个很好的解决方案，但它使用渐变的省略号 . 它有效，当你有动态文本，所以你不知道它是否足够长，需要一个椭圆 . 优点是您不必进行任何JavaScript计算，它适用于包括表格单元格的可变宽度容器，并且是跨浏览器的 . 它使用了几个额外的div，但它很容易实现 .

    标记：

    <td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

    CSS：

    .fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

    博文：http://salzerdesign.com/blog/?p=453

    示例页面：http://salzerdesign.com/test/fade.html

    回复于
  • 27

    我真的很喜欢线路钳，但还没有对firefox的支持..所以我选择了数学计算而只是隐藏溢出

    .body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

    现在假设您要删除并通过带有链接的jQuery添加此类，您需要有一个额外的像素，因此最大高度为63像素，这是因为您需要每次检查高度是否高于62px，但在4行的情况下你会得到一个假的真实，所以一个额外的像素将解决这个问题，它不会产生任何额外的问题

    我将粘贴一个coffeescript作为一个例子，使用一些默认隐藏的链接，类读取更多和无读取，它将删除溢出不需要它的那些并删除正文 - 溢出类

    jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()
    回复于
  • 4

    基本示例代码，学习代码很容易 . 检查样式CSS注释 .

    table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

    <table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>
    回复于
  • 5

    我一直在寻找这个，但后来我意识到，该死的我的网站使用PHP！为什么不在文本输入上使用trim功能并使用最大长度....

    对于那些使用php的人来说，这也是一个可能的解决方案：http://ideone.com/PsTaI

    <?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>
    回复于

相关问题