争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

css完成文字溢出省略号的4种方法(附代码)

时间:2024/1/30作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

1.单行实现文字省略号

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

2345截图20181015145014.png

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

关键词:css完成文字溢出省略号的4种办法(附代码)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版