`

CSS英文、中文换行与不换行

阅读更多
结构:

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自动换行

    CSS中的强制换行与强制不换行

    ### CSS中的强制换行与强制不换行 在网页布局设计中,文本的换行处理是非常重要的一个方面。良好的文本换行不仅可以使页面看起来更加整洁美观,还能够提高用户的阅读体验。CSS(层叠样式表)提供了多种方式来控制...

    CSS 文字自动换行

    #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器如IE6和IE7的支持。 ##...

    DIV CSS 图片自动换行

    在网页设计中,"DIV CSS 图片自动换行"是一个常见的布局技巧,它涉及到CSS(层叠样式表)中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片,使得图片能够在页面中自动适应并换行排列,同时还可以...

    英文强制换行css 使用css强制英文单词断行代码

    在做企业站的英文版的时候,英文单词由于剩下的空间不足,导致整个单词都换行,造成单词之间的空隙太大。如下图: 使用css属性word-break:break-all; 后的效果:如下图:   强制不换行 复制代码代码如下:{ white-...

    CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

    - 注意,`word-wrap`只对英文单词有效,对于中文字符,因为中文本身就具备自动换行的特性,所以不需要这个属性。 总的来说,CSS3的`word-wrap`属性提供了一种有效的方式来处理英文文本的换行问题,使得网页设计更加...

    CSS实现不换行/自动换行/文本超出隐藏显示省略号

    CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。

    CSS强制中英文换行与不换行 强制英文换行示例

    只对中文起作用,强制换行 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强制不换行的css方法

    在本文中,将讨论CSS中的换行控制技术,特别是如何使用CSS强制实现文本换行或阻止换行。这在网页设计和布局过程中非常重要,尤其是在处理表格、列表或其他需要精确控制文本流动的元素时。 首先,了解`word-break`...

    css 自动换行 强制换行属性 (firefox+ie)

    3. `keep-all`: 主要用于中文、日文、韩文等亚洲语言,它不允许单词内部换行,除非遇到空格或标点符号。这样可以保持亚洲文字的完整性,避免单个字符被拆分。 示例代码: ```css div { width: 150px; background-...

    CSS实现连续数字和英文的自动换行的方法

    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css#wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者...

    css之自动换行(ZT)

    对于中文文本,由于汉字之间没有自然的断行点,CSS的自动换行功能相对较弱。通常,我们需要依赖JavaScript库或CSS自定义伪元素来实现中文的换行优化,例如使用`text-overflow`和`display: -webkit-box;`配合`-webkit...

    CSS强制换行对齐的实现方法

    在汉字与英文或数字之间增加间距。 4. 确保设置了合适的宽度(width)属性,以避免文本在过宽或过窄的容器中出现不协调的对齐效果。 5. 在不同浏览器上测试text-justify的表现,因为不同浏览器对text-justify的支持...

    CSS强制单元格换行

    <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>

    CSS代码使纯英文数字自动换行的简单实现

    word-wrap用来控制css换行 两种取值: (1) normal (2) break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。) word-break用来控制断词 三种...

    CSS自动换行

    #### 正常换行与任意位置换行 1. **标准换行(IE/Chrome/Firefox)** - 使用`white-space: normal;`属性,这将使文本按照正常方式换行,即在遇到空格或换行符时换行。 - 示例代码: ```css #wrap { white-...

    css文字换行

    - 考虑不同语言的换行规则,如中文和日文通常在任何位置都可以换行,而英文需要在单词间换行。 - 在移动端优先的策略下,先优化小屏幕布局,再扩展至大屏幕。 - 避免过度依赖JavaScript进行文字换行,尽可能使用...

Global site tag (gtag.js) - Google Analytics