css too long to display several solutions ellipsis

Single line of text (Method a):

grammar:
text-overflow : clip | ellipsis
parameter:
clip: omitting mark is not displayed (...), but simply cut (clip of this parameter is not commonly used!)
ellipsis: Display omitted when the marking object text overflow (...) Description: Sets or retrieves whether a tag is omitted (...) within the designated object text overflow. The biggest drawback: text-overflow: ellipsis in FF property is no effect.

 /* 内容过长显示成省略号（内容显示为一行） */
 white-space: nowrap;/*设置不换行*/
 overflow: hidden; /*设置隐藏*/ text-overflow: ellipsis; /*设置隐藏部分为省略号*/

Multiple lines of text (Method II):

WebKit browser or mobile end of the page:

Page WebKit browser or mobile terminal (mostly WebKit browser kernel) is easy to implement and can be used directly css extended attributes of WebKit (WebKit is private property) -webkit-line-clamp; Note: This is a property (unsupported WebKit property) is not standardized, it does not appear in the draft CSS specifications.
The number of rows -webkit-line-clamp block for limiting a text element displayed. To achieve this effect, it requires a combination of other properties WebKit

  /* 内容过长显示两行，多余为省略号 */
  text-overflow:ellipsis;/*设置隐藏部分为省略号*/
  overflow: hidden;/*设置隐藏*/ display: -webkit-box; -webkit-line-clamp: 2;/*设置显示行数，此处为2行，可设置其他数字*/ -webkit-box-orient: vertical;

This property is suitable WebKit browser or mobile terminal (mostly WebKit core) browser. Cross-browser compatible solution:

The third method:

The simplest thing is more reliable container is provided opposite the height positioning, implemented with analog elements contain an ellipsis (...); and

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y; }

note:

nice height height line-height is 3 times; the end of the useful omitted png made translucent effect Dodge, or set a background color; IE6-7 content does not display the content, so to be compatible IE6-7 Add the contents of a tag, such as with

<span class="line-clamp">...</span>

To simulate; to support IE8, you need to :: after replaced: after; JavaScript programs:

Js can also be used to simulate based on the above ideas, implementation is very simple, it is recommended to do similar work of several mature gadget: 1.Clamp.js

Download the document and address: https://github.com/josephschmitt/Clamp.js. Use is very simple:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

2.jQuery plug -jQuery.dotdotdot

$(document).ready(function() {
 $("#wrapper").dotdotdot({ // configuration goes here }); });

This article is a summary of income for their own learning, content and multi-reference summary describes a method for the practice of their own people in line to see, so there is some excerpts, only intended to remind myself to look more in mind, if infringement please contact qq: 1534147975, if you have questions you can also contact times QQ. Welcome to the exchange.