CSS - div overflow section in the text display ellipsis

So that the inner div text overflow section with an ellipsis display, can be summarized into two solutions, one approach is to use CSS to solve, another approach is to solve js.

First, the display control by CSS

Div displays the line, the excess display ellipsis

The div display multiple lines, the excess display ellipsis

Code:

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" > 
        < title > example </ title > 
        < style > 
            / * line text display ellipses end * / 
            .div1 { 
                height : 100px ; 
                width : 100px ; 
                background : Green ;  
                text-overflow : ellipsis ;   / *ellipsis: displaying an omission symbol to represent the pruned text string: given string to represent text is trimmed * /  
                White-Space : nowrap ;    / * nowrap: specified text in the paragraph without wrapping    * /  
                overflow : hidden ;  / * exceeding part hide * / 
            } 
            / * multi-line text display ellipses end * / 
            .div2 { 
                / * height: 100px; * / 
                width : 100px ; 
                background : YellowGreen ;  
                the display : -webkit-Box ;   / *  display: -webkit-box; properties must be combined with the box model object as elastically stretchable display   * / 
                -webkit-Box-Orient : Vertical ;  / *   -webkit-Box must Orient-binding properties, set or retrieve objects telescopic cartridge the arrangement of sub-elements   * / 
                -webkit-line-clamp : . 5 ;  / *   number of lines -webkit-line-clamp block for limiting a text element displayed * / 
                overflow : hidden ; 
            } 
        </ style > 
    < / head > 
    < body > 
        < div class = "DIV1" > 
            ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
        </ Div > 
        < div class = "Div2"  > 
            Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey 
        </ div > 
    </ body > 
</ HTML >

operation result:

Second, the display control by js

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实例</title>
        <style type="text/css">
            .mydiv {
                width: 150px;
                height: 200px;
                background: pink;
            }
        </style>
    </head>
    <body > 
        < div class = "myDiv" ID = "Demo" > display text js operated by a method, such that the end of the text display ellipsis </ div > 
        < Script > 
            var myBox = document.getElementById ( ' Demo ' ); // Get the object directly domo ID 
            var mydemoHtml = myBox.innerHTML.slice ( 0 , 20 is ) +  ' ...... ' ; // Slice () method returns the selected elements from the existing array 
            myBox.innerHTML = mydemoHtml; //Filled into the specified location 
        </ Script > 
    </ body > 
</ HTML >

operation result:

CSS - div overflow section in the text display ellipsis

First, the display control by CSS

Second, the display control by js

Guess you like