CSS: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;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
http://www.knowsky.com/
(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 {<br />
table-layout:fixed;word-break:break-all;word-wrap:break-word;}<br />
div{word-break:break-all;word-wrap:break-word;}
就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。

后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下:
代码

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

这也是现在我用的代码。

 

 

时间: 2024-07-28 14:51:33

CSS:CSS控制文本自动换行的相关文章

CSS text-transform控制文本大小写

定义 text-transform控制文本大小写 继承:是 JavaScript的语法 的CSS属性也可以动态改变一个JavaScript . 脚本语法: object.style.textTransform = "利用" p {  text-transform: uppercase } Value Description none 默认方式 capitalize 每个字的文字开头大写字母 uppercase 只有大写字母 lowercase 只有小写字母 我们看看简单的例子. <

英文文本自动换行的css代码

<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()"

javascript-JS和css是否有控制文本角度的手段?

问题描述 JS和css是否有控制文本角度的手段? 如题,在js和css中,有没有控制文本角度的手段?不是文本方向,而是角度,比如让一段文本旋转20度? 解决方案 http://blog.sina.cn/dpool/blog/s/blog_7cbe44af01018dj8.html?vt=4 解决方案二: 没有没有没有没有没有没有没有没有

用CSS来控制网页的背景

css|控制|网页 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的.想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,我打算分开两步介绍,首先为在网

学习网页制作: 用CSS来控制网页背景

css|控制|网页|网页背景 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的.  想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,我打算分开两步介

用CSS风格的文本和图形构建网页实用按钮

css|按钮|图形|网页 在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果.  相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面建立和载入一个图像,而不是为每一个按钮建立各自的图像. 同一个图像可以使用在网页所有按钮的背景.按钮的文本标签都是简单的CSS风格文本. 预先载入的图形/CSS混合风格的为数不多问题之一是对翻滚效果有所限制

利用CSS准确控制页面和元素背景

css|控制|页面 在CSS出现以前,Web开发者只能对页面和背景元素进行少量的控制.当然,那时候他们能使用background属性将一个图像在整个页面上进行平铺,他们能用bgcolor属性来控制图像的背景颜色.但是他们的控制仅仅这些--例如,他们不能调节页面背景图像的位置,不能控制平铺(tiling),也不能生成页面水印. 现在有了CSS,这些都得到了改变,它可以通过一组background-*指令准确控制页面和元素背景.另外,它还提供了大量优化了的函数.使用CSS指令控制背景元素有很多优势:

用CSS来控制网页背景

css|控制|网页|网页背景 ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成.但是在这里,我所指的并非

CSS如何控制网页背景

大家常常为一些比较合适于自己的网页背景的图片而发愁吧,因为这些图片不是太大就是太小,或者太乱,说到背景也就只有背景颜色和颜色图片,这两个大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧,其实也可以用CSS样式来做的背景,整体配合还是非常不错的. ·背景颜色 background-color 这个的默认值是transparent(透明色). 以下是引用片段: 例:body{background-color:yellow}