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

Bamboy 发布于2019-08-29 12:49 / 1705人阅读

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

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

2018-9-11 by yl
这是在实际应用中遇到的一个新的需求，就是指定文本行数，如果超出就用省略号代替
.content{  /*设置文本为多行，如果超出长度用省略号代替*/
            width: 200px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;  /*限制在一个块元素显示的文本的行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

（1）用省略号代替超出的部分，这个就是高度、宽度都受到限制的时候适用（是我比较喜欢的一种）

text-overflow:clip 修剪文本|ellipsis 显示省略符号来代表被修剪的文本|string 使用给定的字符串来代表被修剪的文本。

.content {
        width: 80%;
        height: 40px;
        padding: 5px;
        **overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          -moz-text-overflow: ellipsis;
          white-space: nowrap;  /*规定段落中的文本不进行换行*/**
    }

需要将三者结合使用，达到想要的效果：

（2）超出部分换行，在单词过长，高度不受限制时适用

word-break: normal 默认的|break-all 在单词内换行|keep-all 只能在半角空格或连字符处换行;

p {
    width: 160px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    **word-break: break-all;**
}

（3）由于绝对定位或者其他情况，导致的标题盖住链接的，可以采用flex布局

.word-secondli {
        display: flex;
        flex-wrap: wrap;/*换行，第一行在上*/
        justify-content: space-between;/*两端对齐，项目间隔相等*/
        align-items: center;/*居中对齐*/
        border-bottom: 1px solid #ccc;
    }


    在网页开发中，经常会碰到在一些场景
    click me

这样，标题过长的没地儿放下链接的时候，链接会自动换行。

以上就是我能想到的方法，如果有什么不足的地方，欢迎指教。

再补充一条，比如想让内容在第二行的时候，超出部分隐藏：

            {
            width: 100%;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: -webkit-inline-box;
            }

这个处理方式的目前只兼容webkit内核的浏览器（其他方法见解说二）：

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/112164.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...

xbynet 2019-08-02 15:18 评论0 收藏0
CSS处理文本过长或超出部分（解说二）

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

AlienZHOU 2019-08-23 18:07 评论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
CSS开发

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

warkiz 2019-08-30 13:54 评论0 收藏0