FAQ movement end (single and multi-line text overflow omitted)

Overflow line text omitted:

Add to the container css style:

.text-ellipsis{
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            background-color: lightblue;
            margin:0 auto;
        }
        .text-ellipsis{
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="text-ellipsis">
        EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet modern minimalist custom
    </div>
</body>
</html>

If the container used flex layout:

At this time, single-line text omitted go wrong

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            background-color: lightblue;
            margin:0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-ellipsis{
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="text-ellipsis">
        EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet modern minimalist custom
    </div>
</body>
</html>

Solution: can not be used directly together, you can add a span wrap text, set the text in the span tag overflow hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            background-color: lightblue;
            margin:0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-ellipsis{
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div>
        <span class= "text-ellipsis" > EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern </ span > 
    </ div > 
</ body > 
</ HTML >

Multi-line text overflow omitted:

This also can be achieved, but compatibility is not very good, only compatible webkit kernel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:180px;
            background-color: lightblue;
            margin:Auto 0 ; 
        } 
        .multiline-ellipsis { 
            overflow : hidden ; 
            text-overflow : ellipsis ; 
            the display : -webkit-Box ; / * flow layout * / 
            -webkit-Line-CLAMP : . 3 ; / * . 3 lines * / 
            -webkit- Orient-Box : vertical ; / * vertically from the top to the bottom of the sub-elements are arranged * / 
            White-Space : ! Normal Important ; 
            Word-wrap : BREAK-Word; / * Allows long word wrap to the next line * /

        } 
    </ Style > 
</ head > 
< body > 
    < div > 
        < span class = "multiline-ellipsis" > EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern </ span > 
    </ div > 
</ body > 
</ HTML >

Note that there is a pit, that is the best adaptation of the parent element height, the height is too small or too Mets collapse

Height is too small to display the full number of lines:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:180px;
            background-color: lightblue;
            margin:Auto 0 ; 
            height : 50px ; 
        } 
        .multiline-ellipsis { 
            overflow : hidden ; 
            text-overflow : ellipsis ; 
            the display : -webkit-Box ; / * flow layout * / 
            -webkit-Line-CLAMP : . 3 ; / * . 3 lines * / 
            -webkit-Box-Orient : vertical ; / * from the top to the bottom vertically arranged sub-elements * / 
            White-Space : Normal Important! ;
            wrap-Word : BREAK-Word ; / * allows long word wrap to the next line * /

        }
    </style>
</head>
<body>
    <div class="multiline-ellipsis">
        EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet custom minimalist modern EU to send the whole cabinet modern minimalist custom
    </div>
</body>
</html>

Height is too large, it will continue to be displayed after the ellipsis ......

FAQ movement end (single and multi-line text overflow omitted)

Guess you like