在 p 标签的宽度内切片文本[重复]答案

【问题标题】：Slice text within width of p tag [duplicate]在 p 标签的宽度内切片文本[重复]
【发布时间】：2013-10-03 10:45:26
【问题描述】：

我有一个p tag with fix width。如果出现一个长句子，则该句子应自动切片，如下图所示。

所以这句话应该是这样的。

我尝试了许多 Css 选项，例如 word-wrap and text-overflow，但没有任何效果。有些会增加宽度，有些会导致其他问题。我也试过overflow:hidden，这隐藏了第二行但没有在第一行末尾添加...。

【问题讨论】：

您是否查看过诸如dotdotdot.frebsite.nl 之类的截断插件？
您必须在文本溢出样式中使用省略号并隐藏溢出。

标签： javascript jquery html css

【解决方案1】：

使用：

p {
    text-overflow: ellipsis;
    display block;
    width: 100px;
    overflow: hidden;     
    white-space: nowrap;
    padding: 5px;
    border: solid 1px #000;
}

示例： http://jsfiddle.net/ezywm/2/

【讨论】：

【解决方案2】：

查看此之前的 stackoverflow 问题以获取此答案 Insert ellipsis (...) into HTML tag if content too wide

我们也可以借助 jQuery 来制作这个效果。

查看dotdotdot jQuery 插件。

CSS3：

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ellipsis</title>
    </head>
    <style type="text/css">
   p {
        border: 1px solid #CCCCCC;
        overflow: hidden;
        padding: 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 250px;
       } 
    </style>
    <body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </body>
    </html>

【讨论】：