单行文本实现溢出显示省略号

最新推荐文章于 2022-07-18 23:06:01 发布

信封中的阳光

最新推荐文章于 2022-07-18 23:06:01 发布

阅读量357

点赞数

分类专栏：文本溢出显示省略号文章标签： css3 移动 pc

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/53195949

版权

文本溢出显示省略号专栏收录该内容

0 篇文章 0 订阅

订阅专栏

单行文本实现溢出显示省略号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>单行文本实现溢出显示省略号...</title>
        <!--
            需要掌握知识点：
                1.单行文本实现溢出显示省略号，css3方式，适用于pc与移动端。
        -->
        <style>
            .line_1{
                width: 500px;
                border: 1px solid #000000;
                margin: 50px auto;
                line-height: 50px;
                font-size: 28px;
                /* 所需要css样式 */
                overflow: hidden;
                text-overflow: ellipsis;/* 显示省略符号来代表被修剪的文本  */
                white-space: nowrap;/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。  */
            }
        </style>
    </head>
    <body>
        <!-- 正常溢出显示省略号 -->
        <div class="line_1">
            壶这个字左右对称，源自实物象形。《说文解字》释为：昆吾圆器也。昆吾，汉族人传说的远古人物，相传为陶器发明者，由此推论，最初的“壶”应为陶器。早期土陶器疏松，用之盛酒恐不能胜任，故早期酒器多为青铜。
        </div>
        <!-- br之后另起一行显示省略号 -->
        <div class="line_1">
            壶这个字左右对称，<br />源自实物象形。《说文解字》释为：昆吾圆器也。昆吾，汉族人传说的远古人物，相传为陶器发明者，由此推论，最初的“壶”应为陶器。早期土陶器疏松，用之盛酒恐不能胜任，故早期酒器多为青铜。
        </div>
        <!-- br之前刚好够一行，br之后另起一行显示省略号 -->
        <div class="line_1">
            壶这个字左右对称，源自实物象形。《<br />说文解字》释为：昆吾圆器也。昆吾，汉族人传说的远古人物，相传为陶器发明者，由此推论，最初的“壶”应为陶器。早期土陶器疏松，用之盛酒恐不能胜任，故早期酒器多为青铜。
        </div>
        <!-- br折行前后都超出一行，则两行![这里写图片描述](https://img-blog.csdn.net/20161117094350613)都显示省略号 -->
        <div class="line_1">
            壶这个字左右对称，源自实物象形。《说<br />文解字》释为：昆吾圆器也。昆吾，汉族人传说的远古人物，相传为陶器发明者，由此推论，最初的“壶”应为陶器。早期土陶器疏松，用之盛酒恐不能胜任，故早期酒器多为青铜。
        </div>
    </body>
</html>

测试图

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行文本实现溢出显示省略号

单行文本实现溢出显示省略号<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>单行文本实现溢出显示省略号...</title> <!-- 需要掌握知识点： 1.单行文本实现溢出显示省略号，css3方式，适用于pc与移动端。
复制链接

扫一扫

专栏目录