flutter 文字过长超出范围_CSS处理文本过长或超出部分（解说一）

在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用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内核的浏览器(其他方法见解说二)：