CSS处理文本过长或超出部分（解说二）

xbynet 发布于2019-08-02 15:18 / 742人阅读

摘要：原理两个盒子，文字内容放于盒子，固定盒子的高度及行高，超出的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。

解说一中的方法不兼容火狐、IE浏览器，所以解说二会给出通用的css写法。

原理：两个盒子a、b，文字内容放于盒子b，固定盒子a的高度及行高，超出a的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。

        .a{
            width: 300px;
            /*想要显示几行，高度就是行高*倍数*/
            height: 52px;
            line-height: 26px;
            overflow: hidden;
            border: 1px solid #ffffd;
        }
        .a::before{
            float: left;
            width: 5px;
            content: "";
        }
        .a::after{
            height: 26px;
            content: "...";
            line-height: 26px;
            width: 3em;/* 省略号宽度 */
            margin-left: -1em;/* 使省略号在文字的最末端 */
            position: relative;
            top: 26px;
            left: 100%;
            background-color: #fff;
        }
        .b{
            float: right;
            margin-left: -5px;
            width: 100%;
            line-height: 26px;
            word-break: break-all;
        }


    在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，
这个时候，就需要用css对其进行处理。下面的方法是我在实际工作中总结出来的，给大家参考一下。

超出盒子a的内容都被隐藏掉了，在第二行结尾处，用‘...’覆盖了其他的文字，效果如下图所示：

这个方法存在的问题是：使用的文字的格式，内容的不同，有可能放置的省略号的位置可能不会那么正好合适，如果有更合理的方式，欢迎留言解答。如下图所示：

GPU云服务器云服务器 html超出部分滚动隐藏超出文本鼠标选中文本或得 css文本框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54037.html

CSS处理文本过长或超出部分（解说二）

摘要：原理两个盒子，文字内容放于盒子，固定盒子的高度及行高，超出的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。解说一中的方法不兼容火狐、IE浏览器，所以解说二会给出通用的css写法。原理：两个盒子a、b，文字内容放于盒子b，固定盒子a的高度及行高，超出a的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。showImg(https://segmentfa...

laznrbfe 2019-08-30 11:12 评论0 收藏0
CSS处理文本过长或超出部分（解说二）

摘要：原理两个盒子，文字内容放于盒子，固定盒子的高度及行高，超出的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。解说一中的方法不兼容火狐、IE浏览器，所以解说二会给出通用的css写法。原理：两个盒子a、b，文字内容放于盒子b，固定盒子a的高度及行高，超出a的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。showImg(https://segmentfa...

AlienZHOU 2019-08-23 18:07 评论0 收藏0
CSS处理文本过长或超出部分（解说一）

摘要：在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用对其进行处理。再补充一条，比如想让内容在第二行的时候，超出部分隐藏这个处理方式的目前只兼容内核的浏览器其他方法见解说二在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用css对其进行处理。下面的方法是我在实际工作中总结...

Bamboy 2019-08-29 12:49 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
white-space、word-wrap和word-break的简单整理

摘要：理解和的区别从易于区分和理解的角度，我引用了无双在你真的了解和的区别吗一文中对两个属性作用的解释属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 white-space 、 word-wrap 和 word-break 是决定段落中的文本如何展示的3个css属性，属性说明请点击链接查看参考手册。 white-space wh...

Magicer 2019-08-30 15:52 评论0 收藏0