0

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

在此处输入图像描述

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

在此处输入图像描述

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

4

2 回答 2

8

采用 ：

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

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

于 2013-09-27T08:00:37.043 回答
0

检查this previous stackoverflow question for this answer 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>
于 2013-09-27T08:59:55.050 回答