您现在的位置是：网站首页>网站制作心得网站建设教程
css控制文本内容超过长度显示省略号
2019-06-27来源： 【网站建设教程】
人已围观
简介表格数据通过后台动态读取，结果内容太长折行显示，使得页面显示不友好，我当然不能听之任之，于是，通过css控制，当内容超过设定宽度后自动显示为省略号，为了易用性考虑，给表格加了title属性，这样鼠标放上去，内容就全部浮现显示
未处理前，当div内容超过长度后，换行显示：
处理方法：
1.固定div宽度；
2.增加样式overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
3.建议给div增加title，用来浮显显示。
代码如下：
处理方法：
1.固定div宽度；
2.增加样式overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
3.建议给div增加title，用来浮显显示。
代码如下：
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>css控制文本内容超过长度显示省略号</title>
- <style type="text/css">
- .system1{
- width:80px;/*必须给定固定宽度*/
- overflow: hidden;/*表示超过宽度的内容会被修剪*/
- text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
- white-space: nowrap;/*文本内容不换行显示*/
- }
- </style>
- </head>
- <body>
- <div class="system1" title="css控制文本内容超过长度显示省略号">css控制文本内容超过长度显示省略号</div>
- </body>
- </html>
运行后，效果如下，如果需要看到全部文字，只需要把鼠标放在文字上面即可：
很赞哦！ ()
猜您喜欢
相关文章
付费说明
1、安装cms后台，费用是200，基础费用200包括后台调试以及部分页面模板修改.
2、请加我个人微信 634626966，或者扫一扫微信二维码。备注“网站”
3、系统安装只限定于帝国cms，并且支持php，虚拟主机，请选择linux系统
4、【收费说明】制作企业网站，我是这么收费的！
空间购买
文章评论
点击排行
猜你喜欢
