Summary of the method for displaying single-line and multi-line text overflow with ellipsis, multi-line text ellipsis

Summary of the method for displaying single-line and multi-line text overflow with ellipsis, multi-line text ellipsis

Requirements:

In front-end page layout, too many texts often affect page layout. Especially on mobile pages, la s are not displayed due to insufficient screen width. Therefore, if the paragraph text can be displayed perfectly according to the available size on the screen, that is, if the screen is large enough, the paragraph text will be displayed completely. If the screen is small, the Section text is displayed in the form of ellipsis.

Solution:

The text-overflow attribute is available in CSS3. If you are not familiar with it, click this query. It is used to display the ellipsis of a single line of text overflow. The ellipsis of a single line of text overflow display can be compatible in modern browsers and mobile terminals.

Effect

Implementation Method:

<P> as Microsoft's gaming platform, Xbox has appeared in Windows Phone and Windows 8, just recently, microsoft announced that it would integrate its Zune consumer brand into the Xbox brand. As the Xbox Live service became more and more influential, its penetration became wider and wider. </P>

    p {        width: 410px;        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;    }

Question:What if we want to implement multi-line text overflow to display ellipsis?

Solution:Webkit supports-webkit-line-clampIf you are not familiar with the attributes, click here for query. This attribute is an unsupported WebKit property that does not appear in the CSS specification draft. But it can be used in the webkit kernel browser.

Effect

Implementation Method:

<Div class = "figcaption"> <p> As a Microsoft game platform, Xbox has appeared in Windows Phone and Windows 8. Recently, microsoft announced that it would integrate its Zune consumer brand into the Xbox brand. As the Xbox Live service became more and more influential, its penetration became wider and wider. </P> </div> <div class = "figcaption"> <p> Can I fix a favorite website? Of course! Fix all frequently visited websites to the Start Screen. How to fix it? Open IE10, right-click in the blank area of the web page, and click the "dingtalk" icon in the application bar to fix the problem. </P> </div> <div class = "figcaption"> <p> we have introduced the useful Colors! Today we will introduce Fresh Paint, a painting software with different styles. We can use it to draw oil paintings. </P> </div>

. Figcaption {background: # EEE; width: pixel PX; height: 3em; margin: 1em ;}. figcaption p {line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;/* This method is applicable to WebKit browsers and mobile terminals because the CSS extension attribute of WebKit is used ;*/}

The problem comes again:How can we achieve perfect compatibility in other mainstream browsers? It seems that JavaScript has to be used for implementation.

Solution:

(Implementation principle: Replace the end characters one by one from the back to the front until the height of the element is smaller than the height of the parent element)

<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript"> $(".figcaption").each(function(i) {        var divH = $(this).height();        var $p = $("p", $(this)).eq(0);        while ($p.outerHeight() > divH) {            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));        };    });</script>