Single line text overflows with ellipsis display

step:

1. Force the text to be displayed in one line

white-space: nowrap;

2. Hide the overflow part

   overflow: hidden；

3. Use ellipsis to display when the text overflows

   text-overflow: ellipsis;

effect:

Omit the renderings

style:

 .ov-es{
    
    
            margin: 100px auto;
            width: 100px;
            height: 50px;
            background-color: orange;
            /* 1.强制文字一行显示 */
            white-space: nowrap;
            /* 2.溢出部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号显示 */
            text-overflow: ellipsis;
        }

Code:

<!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>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .ov-es{
    
    
            margin: 100px auto;
            width: 100px;
            height: 50px;
            background-color: orange;
            /* 1.强制文字一行显示 */
            white-space: nowrap;
            /* 2.溢出部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号显示 */
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    <div class="ov-es">此处省略100个文字，用省略号显示</div>
</body>
</html>

Multi-line text overflow with ellipsis display

step:

1. The overflow part is hidden

overflow: hidden;

2. The overflow part is displayed with an ellipsis

text-overflow: ellipsis;

3. Make ordinary boxes into elastic telescopic boxes

 display: -webkit-box;

4. Display ellipsis on the first few lines

 -webkit-line-clamp: 2;

5. Set the arrangement of the sub-elements of the elastic box

 -webkit-box-orient: vertical;

effect:

style:

在这里插入代码片  .ov-es{
    
    
            margin: 100px auto;
            width: 100px;
            height: 44px;
            background-color: orange;
            /* 1.溢出部分隐藏起来 */
            overflow: hidden;
            /* 2.溢出部分用省略号显示 */
            text-overflow: ellipsis;
            /* 3/让普通盒子变成弹性伸缩盒子 */
            display: -webkit-box;
            /* 4.第几行显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.设置弹性伸缩盒子的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

Code:

<!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>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .ov-es{
    
    
            margin: 100px auto;
            width: 100px;
            height: 44px;
            background-color: orange;
            /* 1.溢出部分隐藏起来 */
            overflow: hidden;
            /* 2.溢出部分用省略号显示 */
            text-overflow: ellipsis;
            /* 3/让普通盒子变成弹性伸缩盒子 */
            display: -webkit-box;
            /* 4.第几行显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.设置弹性伸缩盒子的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

    </style>
</head>
<body>
    <div class="ov-es">此处省略100个文字，用省略号显示</div>
</body>
</html>

css text overflow ellipsis display

Single line text overflows with ellipsis display

step:

effect:

style:

Code:

Multi-line text overflow with ellipsis display

step:

effect:

style:

Code:

Guess you like