13518219792
这篇文章将为大家详细讲解有关css如何实现文字溢出省略号，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站主要从事成都做网站、网站建设、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务阿拉尔,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
在项目中有涉及实现一行或者第几行后加省略号，在实现第几行后加省略号的时候，使用的是-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-wrap
white-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）也会发生
关于css如何实现文字溢出省略号就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
