如何限制段落中文本的长度

时间:2014-01-30 03:29:53

标签: html css html5

我有一个如下段落,可能是任何长度:

  

打破印度:Dravidian和Dravidian的西方干预   Dalit Faultlines是一本由Rajiv Malhotra撰写的书   和Aravindan Neelakandan认为印度的   诚信正在被破坏。

我希望它显示为:

  

打破印度:Dravidian和Dravidian的西方干预   Dalit Faultlines是一本由Rajiv Malhotra撰写的书......

下面是填写我网站描述的代码:                              

目前的描述可以解决任何问题。基于产品的线,我需要将其限制为3行。

1 个答案:

答案 0 :(得分:22)

如果你只想使用html和css,你最好的选择可能是使用类似的东西:

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

以下是一个示例:http://jsfiddle.net/nchW8/ 来源:http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

如果您可以使用javascript,则可以使用此功能:

function truncateText(selector, maxLength) {
    var element = document.querySelector(selector),
        truncated = element.innerText;

    if (truncated.length > maxLength) {
        truncated = truncated.substr(0,maxLength) + '...';
    }
    return truncated;
}
//You can then call the function with something like what i have below.
document.querySelector('p').innerText = truncateText('p', 107);

以下是一个示例:http://jsfiddle.net/sgjGe/1/

相关问题