Question

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

Answer 1

演示：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;
}

Answer 2

在<p>标记的CSS样式下应用。

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

JSFIDDLE DEMO

Answer 3

是的ellipsis

是可能的

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

Answer 4

这是我用于项目的内容。你需要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;
}

Answer 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插件。

Answer 6

可以使用substring()

在纯JavaScript中执行

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>

如何在CSS中显示有限的文本

6 个答案: