css 文本溢出显示省略号

最新推荐文章于 2024-09-19 08:00:00 发布

逆风优雅

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量792

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44603011/article/details/122651842

版权

CSS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-variant: small-caps;
            font-size: 40px;
            /*把段落设置为:小型大写字母字体(即文字的大小不变，只不过文字都变成了大小字母)*/
            text-shadow: red 5px 10px 2px;
            white-space: pre;
            /*  pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
                nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
                pre-wrap	保留空白符序列，但是正常地进行换行。
                pre-line	合并空白符序列，但是保留换行符。
                inherit	规定应该从父元素继承 white-space 属性的值。 */
        }
        h2{
            width: 200px;
            border: 1px solid #ddd;
            white-space: nowrap; /*文本强制一行显示*/
            overflow: hidden; /*文本溢出隐藏*/
            text-overflow: ellipsis; /*溢出的文本显示省略号*/
        }

    </style>
</head>

<body>
    <p>hello      
        world</p>
    <p>
         <pre>565    5656        56</pre>
         <!-- pre标签也是可以实现保留空白的 -->
    </p>
    <h2>6666666666666666    666666666666666666666</h2>
 
</body>

</html>

代码展示效果：