css文字溢位省略號顯示

阿新 • • 發佈：2021-02-11

技術標籤：css css

單行文字溢位省略號顯示

步驟：

1.強制文字一行顯示

white-space: nowrap;

2.溢位部分隱藏起來

   overflow: hidden；

3.文字溢位的時候用省略號顯示

   text-overflow: ellipsis;

效果：

省略效果圖

樣式：

 .ov-es{
            margin: 100px auto;
            width: 100px;
            height: 50px;
            background-color: orange;
            /* 1.強制文字一行顯示 */ 

            white-space: nowrap;
            /* 2.溢位部分隱藏起來 */
            overflow: hidden;
            /* 3.文字溢位的時候用省略號顯示 */
            text-overflow: ellipsis;
        }

程式碼：

<!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>

多行文字溢位省略號顯示

步驟：

1.溢位部分隱藏起來

overflow: hidden;

2.溢位部分用省略號顯示

text-overflow: ellipsis;

3.讓普通盒子變成彈性伸縮盒子

 display: -webkit-box;

4.第幾行顯示省略號

 -webkit-line-clamp: 2;

5.設定彈性伸縮盒子的子元素的排列方式

 -webkit-box-orient: vertical;

效果：

樣式：

在這裡插入程式碼片  .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;
        }

程式碼：

<!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>