CSS multiline text exceeds part of ellipsis line

1.<!--multiline text beyond the width section ellipsis: Show lines of text hide extra text extra display ellipsis text-overflow:ellipsis)--

Html:

<div class= "Con"  >    <div id= "Div1" >    1 Hello world! This is my content beyond three lines of ellipsis display! 2hello world! This is the ellipsis display of my content beyond three lines! 3hello world! This is the ellipsis display of my content beyond three lines!     </div></div>

Css:

    . con{  Position:relative}       /* Multiline text out of width part ellipsis:   */        #div1 {            position:absolute;  width:200px;            Overflow:hidden;            -ms-text-overflow:ellipsis;text-overflow:ellipsis;            Display:-webkit-box; The/** object is displayed as a telescopic box model **/            -webkit-box-orient:vertical;/** Sets or retrieves the arrangement of child elements of a telescopic box object **/            -webkit-line-clamp:3;/** Number of rows displayed **/            background:yellowgreen;        }

　　

2. <!--a line of text beyond the width section ellipsis: Force non-wrapping hidden extra text extra display ellipsis text-overflow:ellipsis)--

Html

<div class= "Con"  >        <div id= "Div2" >        1 Hello world! This is my content beyond line ellipsis display! 2 Hello world! This is my content out of line ellipsis display!    </div></div>

Css:

        . con{  Position:relative}        /* Line of text out of width part ellipsis: Force non-wrapping hidden extra text extra display ellipsis text-overflow:ellipsis */        #div2 {            position:absolute;left:0;top:200px;            width:200px;   White-space:nowrap; Overflow:hidden;  -ms-text-overflow:ellipsis;text-overflow:ellipsis;            Background:greenyellow;}

　　

Reference: http://jingyan.baidu.com/article/15622f24017061fdfdbea558.html

Reference http://blog.csdn.net/dannywj1371/article/details/8127778

CSS multiline text exceeds part of ellipsis line