文本溢出显示成省略号

最新推荐文章于 2022-10-09 08:55:29 发布

加鸡腿

最新推荐文章于 2022-10-09 08:55:29 发布

阅读量227

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43437571/article/details/88771988

版权

css 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

主要用到的有三个样式：

			white-space: nowrap;         /* 强制文本在一行内显示 */
           
            overflow: hidden;             /* 溢出内容为隐藏 */
           
            text-overflow: ellipsis;      /* 文本溢出时显示省略标记 */

如下的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100px;
            border: 1px solid #ccc;
            margin:20px auto;
            padding: 4px;
        }
        li {    
            white-space: nowrap;
            /* 强制文本在一行内显示 */
            overflow: hidden;
            /* 溢出内容为隐藏 */
            text-overflow: ellipsis;
            /* 文本溢出时显示省略标记 */
        }
    </style>
</head>

<body>
    <ul>
        <li>是否良好的健康分裤亿万富豪覆盖度开始开发</li>
        <li>发的是感觉不会睡觉的功夫就会死的</li>
        <li>司法鉴定更何况还记得是北方的兰桂坊</li>
        <li>我发觉客观的环境国防建设</li>
        <li>违法干预口感十分公司的合法公司的黄金时代法国红酒</li>
    </ul>

</body>

</html>