您现在的位置是:网站首页> 编程资料编程资料
单元格内文本显示超过单元格宽度的快速解决办法_CSS教程_CSS_网页制作_
2021-09-13
1083人已围观
简介 下面小编就为大家带来一篇单元格内文本显示超过单元格宽度的快速解决办法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
开发过程中,表格单元格里的显示数据经常超出单元格的宽度。遇到这种情况一般会这样处理。
1、超出部分显示省略号(...)
解决办法:在css中设置 text-overflow: ellipsis;
text-overflow:

2、换行显示
解决办法: 在css中设置 white-space:normal;
white-space:(1)normal : 默认 。空白会被浏览器忽略。
(2) pre : 换行和其他空白字符都将受到保护
(3) nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
示例代码:
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
运行效果图:(1)
(2)
(3)
希望大家给点意见。
以上这篇单元格内文本显示超过单元格宽度的快速解决办法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/ginaprogram/archive/2016/07/12/5663924.html
相关内容
- CSS3弹性伸缩布局之box布局_css3_CSS_网页制作_
- CSS中的指定值、初始值和计算值学习教程_CSS教程_CSS_网页制作_
- 利用CSS实现立方体360度旋转效果实例代码_CSS教程_CSS_网页制作_
- css让容器水平垂直居中的7种方式_CSS教程_CSS_网页制作_
- 关于清除浮动塌陷的几种方法总结_Div+CSS教程_CSS_网页制作_
- 纯CSS实现导航栏Tab切换效果_CSS教程_CSS_网页制作_
- CSS3 media queries + jQuery实现响应式导航_css3_CSS_网页制作_
- 灵活运用CSS3特性绘制简易版围棋效果_css3_CSS_网页制作_
- 纯DOM+CSS3实现简单的小风车动画_css3_CSS_网页制作_
- CSS3实现简易版的刮刮乐效果_css3_CSS_网页制作_
