Multiple lines of text overflow display ellipsis

First, add a little bit to the previous article.

The previous article was called "Force span does not wrap." At that time just realized the function, did not know its why. Recently learned a little page production knowledge, the principle has a bit of understanding. For single-line text, the implementation overflow does not wrap and the ellipsis indicates that it can be fully implemented through CSS, the code is as follows:

/* handles whitespace characters in text so that they do not wrap */ / * overflow part hidden */Overflow:hidden; /* show ellipsis to represent trimmed text */ text-overflow:ellipsis;

In fact, as long as the above code cooperation, you can reach a single line of text does not wrap, overflow to the ellipsis representation of the demand. So, it is necessary to understand the principle, in order to truly status quo, in order to change from the pope.

The following is a summary of the multiline text overflow does not break the wording of the line.

1. JS implementation.  Now there are some more mature JS frameworks, I used clamp.js in the project. Links are as follows: Https://github.com/josephschmitt/Clamp.js

2. CSS implementation. Code:

<style>     . text{            Height:4.5rem;            Line-height:1.5rem;            Overflow:hidden;            position:relative;}    . text:after{            Position:absolute;            Right:0rem;            Bottom:0rem;            Content: "...";            Display:block;} </style>   <div class= "text" > the    First Affiliated Hospital of Anhui Medical University is the largest comprehensive teaching hospital in Anhui Province, which integrates medical treatment, teaching, scientific research, prevention, rehabilitation and first aid. Formerly known as Southeast Hospital affiliated to Shanghai Southeast Medical College, founded in 1926. 1949 years inland to Anhui Huaiyuan County, 1952 moved to Hefei. 1993 became the first batch of the Ministry of Health three Grade A hospital. 2011 to enter the top 80 rankings of China's best hospitals. Hospital Open Bed 2582, set up a clinical department 41, Medical Technology Department 19, clinical teaching room 26. </div>

Note: The height must be three times times higher than the line.

Multiple lines of text overflow display ellipsis