结构:
1.Transshipment Booking System is launched只对英文起作用,以字母作为换行依据
2.Transshipment Booking System is launched只对英文起作用,以单词作为换行依据
3.Transshipment Booking System is launched只对中文起作用,强制换行
4.Transshipment Booking System is launched强制不换行,都起作用
5.不换行,超出部分隐藏且以省略号形式出现
5.不换行,超出部分隐藏且以省略号形式出现Transshipment Booking System is launched
代码:
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/
- 1. word-break:break-all;只对英文起作用,以字母作为换行依据
- 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
- 3.{white-space:pre-wrap; 只对中文起作用,强制换行
- 4.{white-space:nowrap; 强制不换行,都起作用
- 5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现
注意,一定要指定容器的宽度,不然的话是没有用的。
注意word-break 是IE5+专有属性
语法:
word-break : normal | break-all | keep-all
参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
分享到:
相关推荐
css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行
### CSS中的强制换行与强制不换行 在网页布局设计中,文本的换行处理是非常重要的一个方面。良好的文本换行不仅可以使页面看起来更加整洁美观,还能够提高用户的阅读体验。CSS(层叠样式表)提供了多种方式来控制...
#### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器如IE6和IE7的支持。 ##...
在网页设计中,"DIV CSS 图片自动换行"是一个常见的布局技巧,它涉及到CSS(层叠样式表)中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片,使得图片能够在页面中自动适应并换行排列,同时还可以...
在做企业站的英文版的时候,英文单词由于剩下的空间不足,导致整个单词都换行,造成单词之间的空隙太大。如下图: 使用css属性word-break:break-all; 后的效果:如下图: 强制不换行 复制代码代码如下:{ white-...
- 注意,`word-wrap`只对英文单词有效,对于中文字符,因为中文本身就具备自动换行的特性,所以不需要这个属性。 总的来说,CSS3的`word-wrap`属性提供了一种有效的方式来处理英文文本的换行问题,使得网页设计更加...
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: ...
本文将探讨如何有效地实现英文自动换行,并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制属性 在CSS中,有几种属性可以用来控制文本的换行行为,包括`word-wrap`和`word-...
在本文中,将讨论CSS中的换行控制技术,特别是如何使用CSS强制实现文本换行或阻止换行。这在网页设计和布局过程中非常重要,尤其是在处理表格、列表或其他需要精确控制文本流动的元素时。 首先,了解`word-break`...
3. `keep-all`: 主要用于中文、日文、韩文等亚洲语言,它不允许单词内部换行,除非遇到空格或标点符号。这样可以保持亚洲文字的完整性,避免单个字符被拆分。 示例代码: ```css div { width: 150px; background-...
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css#wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者...
对于中文文本,由于汉字之间没有自然的断行点,CSS的自动换行功能相对较弱。通常,我们需要依赖JavaScript库或CSS自定义伪元素来实现中文的换行优化,例如使用`text-overflow`和`display: -webkit-box;`配合`-webkit...
在汉字与英文或数字之间增加间距。 4. 确保设置了合适的宽度(width)属性,以避免文本在过宽或过窄的容器中出现不协调的对齐效果。 5. 在不同浏览器上测试text-justify的表现,因为不同浏览器对text-justify的支持...
<label><a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>http://download.csdn.net/user/zxy397472251</a> <a>...</td>
word-wrap用来控制css换行 两种取值: (1) normal (2) break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。) word-break用来控制断词 三种...
#### 正常换行与任意位置换行 1. **标准换行(IE/Chrome/Firefox)** - 使用`white-space: normal;`属性,这将使文本按照正常方式换行,即在遇到空格或换行符时换行。 - 示例代码: ```css #wrap { white-...
- 考虑不同语言的换行规则,如中文和日文通常在任何位置都可以换行,而英文需要在单词间换行。 - 在移动端优先的策略下,先优化小屏幕布局,再扩展至大屏幕。 - 避免过度依赖JavaScript进行文字换行,尽可能使用...