CSS样式控制超长文本在div,p等块级容器中的自动换行
2016-09-27 14:32
405 查看
引出问题的原因:当需要展示的文本过长,定义的div中不能在一行内显示完毕,需要页面展示此类文本时,能够根据文本长度自动换行
案列:
HTML代码:
<div class="content"><p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
CSS代码:
.content {
padding:5px 8px;
word-break:break-all;
}
注:定义padding的左右边距不是必需的,如果没有此样式,浏览器会将文本顶着外部容器的边框部分开始换行,这里只是为了样式更美观。
案列:
HTML代码:
<div class="content"><p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
CSS代码:
.content {
padding:5px 8px;
word-break:break-all;
}
注:定义padding的左右边距不是必需的,如果没有此样式,浏览器会将文本顶着外部容器的边框部分开始换行,这里只是为了样式更美观。
相关文章推荐
- CSS子元素跟父元素的高度一致
- CSS3动画(360度旋转、旋转放大、放大、移动)
- css3
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS3 滤镜学习
- CSS3 滤镜学习
- display:flex浏览器兼容
- 火狐下pre标签如何换行
- css 样式中类之间有空格和无空格的区别
- 修改Push动画样式
- CSS vertical-align 属性
- HTML&CSS基础学习笔记1.34-通用选择器
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
- 用CSS样式画横线和竖线的方法
- 推荐大家使用的CSS书写规范、顺序
- 响应式手机商城页面顶部样式HTML代码
- ProgressBar的样式和Dialog的样式文件
- 探索 CSS3 中的 box-shadow 属性
- css3 rgba 高级用法
- css3 transform 旋转