CSS掌握文本自动换行[网站美工]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

本文“CSS掌握文本自动换行[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

1.你定死表格的宽度,即给表格一个宽度值（是数值,不是百分比）

2.强迫不换行

div{
//white-space:不换行;normal 默许;nowrap强迫在同一行内显示全部文本,直到文本完毕大概遭受 br 对象
white-space:nowrap; }

自动换行

div{
word-wrap: break-word;

//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本法则,答应在字内换行
word-break: normal;
}

强迫英文单词断行

div{
word-break:break-all;
}

3.总结了一下,只要在CSS中定义了以下句子,可保网页不会再被撑开了.

table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;)

注释一下:

1.第一条table{table-layout: fixed;},此款式可以让表格中有!!!(感慨号)之类的字符时自动换行.

2.td{word-break: break-all},普通用这句这OK了,但在有些特别情形下还是会撑开,因此需求再加上背面一句(word-wrap:break-word;)便可以办理.此款式可以让表格中的一些持续的英文单词自动换行.

(1)语法:

word-break : normal | break-all | keep-all

参数:

normal : 　按照亚洲语言和非亚洲语言的文本法则,答应在字内换行
break-all : 　该行为与亚洲语言的normal相同.也答应非亚洲语言文本行的肆意字内断开.该值合适包含一些非亚洲文本的亚洲文本
keep-all : 　与全部非亚洲语言的normal相同.关于中文,韩文,日文,不答应字断开.合适包含少量亚洲文本的非亚洲文本

(2)语法:

word-wrap : normal | break-word

参数:

normal : 　答应内容顶开指定的容器边界
break-word : 　内容将在边界内换行.假如需求,词内换行（word-break）也行发生

阐明:

设置或检索当当前行超越指定容器的边界时能否断开转行.
对应的脚本特点为word-wrap.请参阅我编写的其他书目.
(3)语法:

table-layout : auto | fixed

参数:

auto : 　默许的自动算法.筹划将基于各单元格的内容.表格在每一单元格读取计算之后才会显示出来.速度很慢
fixed : 　固定筹划的算法.在这算法中,水平筹划是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关

阐明:
若何让表格自动换行?
设置或检索表格的筹划算法.
对应的脚本特点为tableLayout.

4.按照网上大大都文章的说法,只要在CSS中加入:
代码
..........

Code:
table { 
table-layout:fixed;word-break:break-all;word-wrap:break-word;} 
div{word-break:break-all;word-wrap:break-word;}
便可以办理表格和层被撑破,最初我也是这样做的.不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读.

后来我发现上述代码改写一下便可以做到既避免表格/层撑破又避免单词断裂了.
以下:
代码

Code:
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}

这也是目前我用的代码.

以上是“CSS掌握文本自动换行[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：

hosts是什么 hosts文件在什么位置若何改正hosts

在 Windows 8 中手动安装语言包

五个常见 PHP数据库问题

Windows中Alt键的12个高效快速的利用本领介绍

MySQL ORDER BY 的实现解析

详解MySQL存储历程参数有三种范例(in、out、inout)

Win8系统恢复出来经典的开始菜单的办法

Win8系统花屏怎么办 Win8系统花屏的办理办法