css实现强制不换行/自动换行/强制换行

强制不换行

div{
  white-space:nowrap;
}

自动换行

div{
  word-wrap: break-word;
  word-break: normal;
}

强制英文单词断行

div{
  word-break:break-all;
}

CSS设置不转行:

overflow:hidden 隐藏
white-space:normal 默认 
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行:
word-break: 
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

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

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }
时间: 2024-08-08 17:52:19

css实现强制不换行/自动换行/强制换行的相关文章

《转载》ASP.NET GridView中文本内容无法换行(自动换行/正常换行)

ASP.NET GridView中文本内容无法换行(自动换行/正常换行) 作者: 字体:[增加 减小] 类型:转载 用GridView来显示课程表,每个单元格的内容包括课程名.上课地点.教师姓名,然后我想让它们分行显示,感兴趣的朋友可以了解下,或许对你有所帮助 最近做项目的时候,遇到这样一个问题:我用GridView来显示课程表,每个单元格的内容包括课程名.上课地点.教师姓名,然后我想让它们分行显示,效果如下图: 可是呢,GridView太顽强了,不管我拼接字符串时用“\r\n”还是"<b

CSS 中的强制换行和禁止换行

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(

CSS 强制换行和禁止换行学习

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; http://jdm.jimdo.com/2010/09/25/css/ Jim

CSS 强制换行和禁止换行

在CSS里,主要有强制换行和禁止换行 一.强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据.      2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据.      3.white-space: pre-wrap;     只对中文起作用,强制换行. word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的内容自动换行,它们的区别在于: 1.wo

CSS 强制换行和禁止换行强制换行 和禁止换行样式

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 原文地址:https://www.cnblogs.com/webenh/p/11

html中的div、td 、p 等容器内强制换行和不换行的实现

div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2.css自动换行 代码如下:div{ wor

不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结

强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space.这三个属性可以说是专为了文字断行而创造出来的.首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: normal(默认) | break-word 各个浏览器均能识别 参数: normal: 允许内容顶开指定的容器边界. break-word: 内容将在边界内换行.必要时会触发word-break(注意:请分辨清

CSS中A标签断字不换行问题(基础知识)

CSS中A标签断字不换行问题 样式表中A标签自动换行的问题,有时候需要做一个列表,比如学校的列表,部门的列表,但有的时候会有问题,比如出现一个完整的学校名称却自动换行,但如果不想让他自动换行该怎么办呢,其实你只要在样式表中加上几句话就行了,如下 .ArtTagList a{width:auto;height:auto;float:left;display:block;white-space:nowrap;margin-left:0px;margin-right:0px;}

使用c:forEach 控制5个换行,foreach换行

转载自: http://www.bkjia.com/webzh/880546.html: 使用c:forEach 控制5个换行,foreach换行 今天做项目的时候碰到一个问题,我需要显示不确定数目的图片在网页上(图片是从数据库查出来的),用的是<c:forEach>循环取值的.就需要做成一行显示固定个数的图片.代码如下(我这里是控制5个一行): <table> <c:forEach items="${list}" var="obj"