"Css/js learning" how to implement the omission of single-line/multiline text overflow (...) )--The correct posture of the old driver bypassing the tunnel

Introduction:friends who write the front-end UI may have had this problem: we need to implement a requirement to hide a potentially lengthy text in a parent element: This text may be single-line:It can also be multi-line:I'll show you how to do this in a simple or elegant way . omission of single-line text overflowfirst on the code

<div style =  'width:400px;               height:40px;               border:1px solid red;' >        <p style= 'overflow:hidden;                  text-overflow:ellipsis;                  White-space:nowrap;' >           This is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text that is some of the text which is some of the texts        </p></div>

Demo

  about Overflow:hiddenHere we need to note that overflow is not a property of the parent element Div, but a property of the P tag, which needs to be distinguished from the general usage of overflow. general usage of 1overflow:hidden: Hides the inner overflow element with the outer layer of a block-level element, such as a DivSpecial use of 2overflow:hidden: In the above example with text-overflow:ellipsis;white-space:nowrap; implement P element to hide its overflow and set (... ) Effect of  about text-overflow:ellipsis;This property depends on the existence of the Overflow:hidden, only set the Overflow:hidden it is able to take effect, you can think of it as a overflow for text overflow hidden a ' special style '  about White-space:nowrapits role is to let the text does not wrap, this is Overflow:hidden and text-overflow:ellipsis effective Foundation! Without it Overflow:hidden and text-overflow:ellipsis cannot take effect! (in the case of a single-line text overflow omission)  Omit from single-line text overflow to multiline text overflowMany students may think this way: How to implement multi-line text ellipsis? Don't you just get rid of the white-space:nowrap? (_ (: 3"∠) _ If it is so simple ...)in practice, let's try and get rid of White-space:nowrap,demo in CSS style:

this time, failed to hide the success, if we overflow:hidden is set in the parent element div? Get Demo:hidden success, but you still can't see the three points you want to see failed properly, well, yes, so for the omission of multiline text overflow we need to go a little further.  ellipsis for multiline text overflow (...). ) Solution---A simple and convenient solution we can do this with WebKit's CSS extension properties:

<div style = 'width:400px;              height:70px;              border:1px solid red;' >           <p style= ' Display:                     -webkit-box;//object as an elastic telescopic box model showing                      -webkit-box-orient:vertical;// Sets or retrieves the arrangement of child elements of a telescopic box object                      -webkit-line-clamp:2;//overflow omitted bounds                     overflow:hidden;//set hidden overflow element ' >                  This is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text which is some text this is some text         </p></div>

Demo:"Attention"14 line CSS is indispensable! 2 Because this is the WebKit CSS property extension, the compatible browser range is the PC-side WebKit Core browser: Chrome/safari/qq browser/360/Cheetah, and most of the mobile browser  ellipsis for multiline text overflow (...). ) Scenario two---a simple and crude solution Plan One is the simplest, but there is a cross-browser compatibility problem, so the people put forward a simple rough way to achieve a common solution: to the div fixed high and wide, while using relative positioning, while the div inside a <p>...</p > Use absolute positioning, set in the lower right corner, at the same time set its background color is white can be:

<div style = 'position:relative;                    width:400px;                    height:45px;                    border:1px solid red;                    Overflow:hidden;                     ' > This is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some of the texts this is some text this is some text <p style = ' position:absolute;right : 0;bottom:6px;margin:0;background:white ' >...</p></div>

Demo

But there are some problems with programme two.1 The ellipsis is also displayed when the text does not overflow the parent element:2 text at the end may have a "cropped" side effect： ellipsis for multiline text overflow (...). Solution three--simple and elegant solution Then there is no more elegant solution, without overflow when the ellipsis (...) is not displayed. ) to hide and display ellipses at overflow time? The answer is YES! Let's take a look at the demo we finally implemented: when the text does not overflow the parent element:when the text overflows the parent element:here is the HTML and JS code:

<div id= ' view ' style= ' border:1px solid Red;width:200px;height:70px;overflow:auto ' ></div>

= ' This is a text which is a text which is a text which is a text which is a text which is a text '= document.getElementById (' view '= el.offsetheight;  for (i=0; i<s.length; i++) {          = s.substr (0, i);           If(n < el.scrollheight) {             = ' hidden ';              = S.substr (0, i-3) + ' ... ';              break;             }}

First we need to figure out the height shown by offsetheight and scrollheight: 1 overflow when the scroll bar is displayed:2 No overflow: el = document.getElementById (' view '); n = el.offsetheight; represents the height of the parent element that is taken to the current package text, el.innerhtml = s.substr (0, I); Indicates that the length increment in the For loop is removed, ' this '--this is '--' This is a ', when n < el.scrollheight is the height of the content in the current text height < scroll bar, which represents just the bounds of the overflow, At this point execute the statement within if El.style.overflow = ' hidden '; el.innerhtml = s.substr (0, i-3) + ' ... '; The overflow of the parent element view is set to hidden, and the three text at the end is used ... Instead, jump out of the For Loop perfect! So we can achieve an elegant solution.

"Css/js learning" how to implement the omission of single-line/multiline text overflow (...) )--The correct posture of the old driver bypassing the tunnel