CSS学习(十二)-文本换行符
来源:互联网 发布:winpe 网络组件 编辑:程序博客网 时间:2024/05/21 22:58
一、理论:
1.word-wrap:
a.normal 在半角空格或连字符的地方进行换行
b.break-word 不截断英文单词换行
2.word-break:
a.normal 中文到边界上的汉字换行,英文从整个单词换行
b.break-all 强行截断英文单词换行
c.keep-all 不允许字断开
3.while-space:
a.normal 默认值
b.pre 文本空白处会被浏览器扣留
c.nowrap 文本会在同行上直到遇到换行符
d.pre-line 合并空白符序列,保留换行符
e.pre-wrap 保留空白符序列,正常进行换行
f.inherit 继承父元素的while-space属性
1.word-wrap:
a.normal 在半角空格或连字符的地方进行换行
b.break-word 不截断英文单词换行
2.word-break:
a.normal 中文到边界上的汉字换行,英文从整个单词换行
b.break-all 强行截断英文单词换行
c.keep-all 不允许字断开
3.while-space:
a.normal 默认值
b.pre 文本空白处会被浏览器扣留
c.nowrap 文本会在同行上直到遇到换行符
d.pre-line 合并空白符序列,保留换行符
e.pre-wrap 保留空白符序列,正常进行换行
f.inherit 继承父元素的while-space属性
二、实践:
1.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #test1 div { background:#a6f5f3; float:left; width:150px; margin:10px; font-size:16px; font-family:simsun; border:1px solid #ccc; } #test2 div { background: #932983; float:left; width:150px; margin:10px; font-size:16px; font-family:simsun; border:1px solid #ccc; word-wrap:break-word; } #test3 div { background: #9eaab6; float:left; width:150px; margin:10px; font-size:16px; font-family:simsun; border:1px solid #ccc; word-break: normal; } #test4 div { background: #2288dd; float:left; width:150px; margin:10px; font-size:16px; font-family:simsun; border:1px solid #ccc; word-break: break-all; } #test5 div { background: #298319; float:left; width:150px; margin:10px; font-size:16px; font-family:simsun; border:1px solid #ccc; word-break: keep-all; } </style></head><body><div id = "test1"> <div> 我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行 </div> <div> 下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。 </div> <div> I'm a chihuo.love eating~ </div></div><div id = "test2"> <div> 我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行 </div> <div> 下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。 </div> <div> I'm a chihuo.love eating~ </div></div><div id = "test3"> <div> 我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行 </div> <div> 下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。 </div> <div> I'm a chihuo.love eating~ </div></div><div id = "test4"> <div> 我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行 </div> <div> 下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。 </div> <div> I'm a chihuo.love eating~ </div></div><div id = "test5"> <div> 我是一个吃货,擅长吃各种好东西。我的希望是:每顿都能吃到好吃的。如果没有好吃的话,下顿有也行 </div> <div> 下顿如果有的话,我就要好好多吃点儿,如果没有,我就留着,争取下下顿能吃到好吃的。 </div> <div> I'm a chihuo.love eating~ </div></div></body></html>
0 0
- CSS学习(十二)-文本换行符
- CSS学习(十三)-文本换行符技巧
- CSS 文本强行换行
- CSS-文本换行
- css 文本换行
- css文本换行
- [CSS] 文本自动换行设置
- css控制文本内容换行
- css设置文本自动换行
- CSS控制文本自动换行
- CSS控制文本自动换行
- CSS控制文本自动换行
- CSS控制文本自动换行
- CSS控制文本自动换行
- CSS控制文本自动换行
- css 调整文本之换行
- CSS控制文本自动换行
- CSS---解决文本溢出,换行
- QtCreator-----设置编码
- nyoj-Color the necklace(Ploya定理 + 欧拉函数 + 扩展欧几里得(求逆元))
- <tx:method/> 有关的设置
- freebsd之bios和boot
- ibatis学习总结
- CSS学习(十二)-文本换行符
- openbmp
- Chisel LLDB 加强工具
- 51NOD OJ 活动安排类问题
- 最小点覆盖 poj3041 Asteroids
- “笨办法学python”学习笔记-一些附加题
- Mysql插件HandlerSocket的应用
- Spring transaction事务之roll back回滚: rollback-for
- 猜红心小游戏