如何在css中显示有限的文本[关闭]答案

【问题标题】：how to show limited text in css [closed]如何在css中显示有限的文本[关闭]
【发布时间】：2015-01-13 10:24:13
【问题描述】：

我在 HTML 中有这样的文本：

 <p>text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</p>

有没有可能变成这样：

text texttext texttext texttext text.....

【问题讨论】：

你想用什么.. php？ javascript？
使用 CSS3 垂直省略号； stackoverflow.com/questions/3922739/…
你想去掉
标签还是剪掉文本溢出？
Truncating long strings with CSS: feasible yet?的可能重复

标签： javascript html css

【解决方案1】：

为<p>标签应用下面的CSS样式。

p{
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFIDDLE DEMO

【讨论】：

OP需要JS解决方案（见cmets）

【解决方案2】：

演示：http://cssdeck.com/labs/otf9h9pn

HTML：

<p class="ellipsis">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext</p>

CSS：

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  width: 20em;
}

【讨论】：

OP需要JS解决方案（见cmets）

【解决方案3】：

这是我在项目中使用的。你需要 JQuery。

工作原理：将类 .more 分配给包含您的文本的 div。

查看我的DEMO

JQUERY

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";


$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

HTML

 <html>
     <head>
    <title>jQuery Read More/Less Toggle Example</title>
  </head>
  <body>
    <span class="more">
      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.
    </span>

  </body>
</html>

CSS

    .morecontent span {
    display: none;
}
.morelink {
    display: block;
}

【讨论】：

【解决方案4】：

是的，ellipsis 可以做到这一点

dl dt {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

【讨论】：

OP需要JS解决方案（见cmets）

【解决方案5】：

是的，这是可能的。

对于单行文本使用text-overflow:ellipsis;，就像这样

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

（来源CSS-Tricks）

对于多行文本，它变得更加棘手。看看这个链接http://html5hub.com/ellipse-my-text/

对于多行文本，我个人使用了一个名为 dotdotdot 的 jQuery 插件。

【讨论】：

【解决方案6】：

可以在纯 JavaScript 中使用 substring()

var str = document.getElementById("longlist").innerHTML;
document.getElementById("shorten").innerHTML = str.substring(0,36)+".....";

<strong>Actual text</strong>
<p id="longlist">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</p>
<hr />
<strong>Result:</strong>
<p id="shorten"></p>

【讨论】：