`
ykyfendou
  • 浏览: 407651 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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强制中英文换行与不换行 强制英文换行示例

    只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: ...

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

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

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

    当处理文本内容时,特别是当文本长度不确定或包含长单词时,如何正确地进行自动换行和强制换行显得尤为重要。这是因为不恰当的换行处理可能导致页面布局的混乱,影响用户体验。本文将详细讲解CSS中的两个关键属性:`...

    css强制换行 css强制不换行的css方法

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

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    本文主要探讨如何实现跨浏览器的强制不换行与强制换行功能,特别是针对`div`和`td`元素。 #### 强制不换行 **基本原理** - **CSS属性**: `white-space`属性用于控制空白符和换行行为。 - **常用值**: `normal` 和 ...

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

    3. **CSS强制英文单词断行** 如果需要强制英文单词在任何地方断行,可以使用: ```css div { word-break: break-all; /* 强制单词在任意位置断行 */ } ``` 这种情况下,即使是完整的英文单词,如果长度超过...

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

    以下是关于CSS强制换行对齐实现方法的详细知识点: 一、text-justify属性的基本用法 text-justify属性定义了如何在元素的文本中进行两端对齐。它可以接受以下几个值: 1. auto:这个值由浏览器决定如何进行两端...

    CSS网页布局强制换行和强制不换行的属性讲解

    而有些时候可能会强制内容不换行,多出的部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性WEBJX.com作一些整理,希望能给大家的工作和学习提供参考。  先了解以下几个属性: 强制不换行p....

    css 不换行 自动换行 强制换行的实现方法

    ### CSS 实现文本不换行、自动换行与强制换行的方法 在Web开发中,对文本进行合理的换行处理是非常重要的,它不仅能够改善页面布局的美观度,还能够提高用户体验。本文将详细介绍如何使用CSS来实现文本的不换行、...

    GridView一般换行与强制换行

    为了解决长文本不换行的问题,可以使用CSS属性`word-break`和`word-wrap`来实现强制换行。这两个属性可以控制文本在何处和何时换行,提供了一种更灵活的解决方案。 - **`word-break: break-all;`**:此属性会强制在...

    CSS对表格单元格强制换行和不换行

    CSS控制Table单元格强制换行与强制不换行  我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。  近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...

    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实现强制不换行、自动换行、强制换行的css代码

    强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; word-break:normal; } 强制英文单词断行 p { word-break:break-all; } *注意:设置强制将英文单词断行,需要将行内元素设置为块级...

    gridview一般换行,强制换行

    通过对`GridView`中一般换行与强制换行机制的理解和实践,我们可以更好地控制文本的显示效果,提升用户体验。根据具体需求选择合适的方式,并注意代码的执行效率和浏览器兼容性,是实现良好视觉效果的关键。

    CSS实现连续字符换行的方法

    连续字符的CSS换行,主要用到CSS的word-break属性,为其添加:break-all参数,这样的话字符会适应规定的宽度而自动换行,实际上这就是CSS的强制换行功能。 复制代码代码如下:<title>连续字符的CSS换行代码</...

    css 英文换行 css(word-wrap/break)使纯英文数字自动换行

    在CSS布局中,有时我们需要处理英文或数字内容在有限宽度的容器内自动换行的问题,尤其是在混合了中文和英文的情况下。这种情况可能导致元素超出其设定的宽度,而不是在适当的位置换行,这在不同浏览器间的表现可能...

Global site tag (gtag.js) - Google Analytics