对于多行

在chrome中，如果你需要在多行上应用省略号，你可以应用这个css。

你也可以在你的css中添加width来指定特定宽度的元素:

.multi-line-ellipsis { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } <p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

你可以尝试在CSS中添加以下省略号:

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

但这段代码似乎只适用于单行修剪。更多修剪文本和显示省略号的方法可以在这个网站上找到:http://blog.sanuker.com/?p=631

确保你有一个块元素，一个最大大小，并将overflow设置为hidden。(在IE9和FF 7测试)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

我使用:

溢出-x:剪辑只是水平折叠它 空格:避免新行 Text-overflow:使用省略号添加…在最后

overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

考虑到显示为伸缩它不会工作，只是改变它到一个适合你的需要。

在CSS中添加下列行以使省略号工作

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

将下面的代码添加到您喜欢的地方

例子

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }