php实现一行省略号,css实现文字溢出省略号的四种方法（附代码）

本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在项目中有涉及实现一行或者第几行后加省略号，在实现第几行后加省略号的时候，使用的是-webkit-line-clamp、-webkit-box-orient属性，会出现webpack打包-webkit-box-orient属性被忽略的情况，这里记录下

1.单行实现文字省略号/* 这里要显示的设置宽度 */

overflow: hidden;

white-space: nowrap;

/* 文字超出宽度则显示ellipsis省略号 */

text-overflow: ellipsis;

width: 100%;

2.第几行实现文字省略号display: -webkit-box;

-webkit-box-orient: vertical; /* 设置方向 */

-webkit-line-clamp: 2; /* 设置超过为省略号的行数 */

overflow: hidden;使用webpack打包工具时，会忽视这个-webkit-box-orient属性，这里修改成下面的写法就可以了display: -webkit-box;

overflow: hidden;

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

-webkit-line-clamp: 8;

text-overflow: ellipsis;

3.用js实现字数后加省略号if (title.length > 26) {

title = title.substring(0, 27) + "...";

}

4.换行word-break和word-wrapwhite-space:normal(自动换行)，当写入的文字超过定义的宽度后会自动换行，但当写入的数据是一堆没有空格的字符或者字母或者数字时，超过容器的宽度时就会把容器撑大，不换行

这时可以用：word-break:break-all;word-wrap:break-word来解决

word-break:break-all在超过容器宽度时，若有一个单词很长，则会将单词截断，分开写

word-wrap:break-word在超过容器宽度时，若有一个单词很长，则会将单词放到下一行，而不对单词进行截断

word-break : normal | break-all | keep-all

normal :允许在字内换行

break-all : 允许在单词内换行

keep-all : 只能在半角空格或连字符处换行。

word-wrap : normal | break-word

normal : 允许内容顶开指定的容器边界

break-word : 内容将在边界内换行。如果需要，词内换行(word-break)也会发生