`

CSS英文单词强制换行

 
阅读更多

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
Firefox3.6中测试可以使用word-wrap:break-word强制换行,但word-break:break-all;仍无效
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果:隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4. (Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word- break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
效果:隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

分享到:
评论

相关推荐

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

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

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

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

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

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

    gridview一般换行,强制换行

    实现强制换行可以通过设置CSS样式来完成: 1. **`word-break: break-all`**:此样式会使得长单词或URL等能够被断开以适应容器宽度。 2. **`word-wrap: break-word`**:此样式会先尝试将文本按单词边界换行,若...

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

    2. `break-all`:这个值告诉浏览器即使在单词内部也可以断开,以便在边界处强制换行。这对于解决长串英文无法换行的问题非常有用,但可能会导致阅读上的困扰,因为单词可能会被不自然地分割。 3. `keep-all`:这个...

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

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

    GridView一般换行与强制换行

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

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

    当需要让文本在任何字符处都强制换行,即使它是一个很长的单词,这时可以使用`word-break: break-all;`。这个属性告诉浏览器在达到元素容器的边界时,即使在单词的中间也要进行断行。这对于处理URL、连续的长字符串...

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

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

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

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

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

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

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

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

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

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

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的默认样式`white-space`是`normal`,这意味着元素内的文本会在适当的地方自动...

    CSS实现强制不换行、自动换行、强制换行的css代码

    这里我们将详细探讨如何使用CSS实现强制不换行、自动换行以及强制换行,同时也会提及一些相关技巧。 1. **强制不换行** 当你希望某个文本内容在一个容器内不进行换行显示时,可以使用`white-space`属性并将其值...

    CSS 之强制换行技巧

    CSS强制换行技巧主要解决的是当容器中出现连续的英文或数字时,由于它们不会自动换行,可能会导致容器被撑大而超出预期布局的问题。在CSS中,有多种方法可以实现强制换行,特别是在不同浏览器环境下,需要使用不同的...

    firefox,IE 都兼容字符强制换行

    虽然这两款浏览器在处理某些HTML和CSS特性时可能存在差异,但可以通过一些方法来实现跨浏览器的字符强制换行。 字符强制换行通常是为了防止文本过长导致布局混乱或者超出容器边界。在HTML中,我们通常使用` `...

Global site tag (gtag.js) - Google Analytics