CSS英文单词强制换行,css调控文字自动换行

机关换行难题,寻常字符的换行是相比较客观的,而连日的数字和英文字符平日将容器撑大,挺让人头痛,下边介绍的是CSS何以兑现换

行的章程

对此div,p等块级成分
平常文字的换行(亚洲文字和非北美洲文字)成分拥有暗许的white-space:normal,当定义的宽度之后自动换行

html

平时文字的换行(欧洲文字和非北美洲文字)成分具有暗中同意的white-space:normal,当定义

CSS英文单词强制换行,css调控文字自动换行。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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

成效:能够兑现换行

2.(Firefox浏览器)延续的英文字符和阿拉伯数字的断行,Firefox的装有版本的尚未化解那个难点,
小编们唯有让超越边界的字符隐藏可能,给容器增添滚动条

#wrap

{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效用:容器平常,内容隐藏

对于table

  1. (IE浏览器)使用 table-layout:fixed;强制table的幅度,多余内容隐藏

    abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

功用:隐藏多余内容

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>

 

效率:能够换行

  1. (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>

效用:隐藏多于内容

伍.(Firefox浏览器) 在td,th中嵌套div,p等选拔地点提到的应付Firefox的办法
运作代码框100素材网
最后,那种现象出现的可能率相当小,可是无法解除网上好友的恶搞。倘使

有哪些难题请到在下边留言

上面是关系的事例的功能

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
 
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
 
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that 
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, 
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes 
precedence over the noWrap property in this scenario</div>
 
<h1><code>IE  word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE  word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF  table-layout:fixed; overflow:hidden;</code></h1>
<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>
</body>
</html>

机动换行难题,平常字符的换行是比较合理的,而接二连三的数字和英文字符平日将容器撑大,挺令人高烧,上边介绍的是CSS怎样促成换行的格局
对于div,p等块级成分平常文字的换行(澳大塞维利亚文字和非澳洲文字)成分具有暗中同意的white-space:normal,当定义的宽窄之后自动换行html
<div
id=”wrap”>平常文字的换行(欧洲文字和非洲欧洲洲文字)成分具有私下认可的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
壹.(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

电动换行难点,平常字符的换行是比较客观的,而连日的数字和英文字符日常将容器撑大,挺令人发烧,上边介绍的是CSS哪些贯彻换

行的点子

对此div,p等块级成分
正规文字的换行(亚洲文字和非亚洲文字)成分具备暗中同意的white-space:normal,当定义的宽窄之后自动换行

html

正规文字的换行(北美洲文字和非欧洲文字)成分具有私下认可的white-space:normal,当定义

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

功用:能够完成换行

二.(Firefox浏览器)一而再的英文字符和阿拉伯数字的断行,Firefox的享有版本的未有消除这么些问题,
咱俩只有让超越边界的字符隐藏或然,给容器增多滚动条

#wrap

{word-break:break-all; width:200px; overflow:auto;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效用:容器平常,内容隐藏

对于table

  1. (IE浏览器)使用 table-layout:fixed;强制table的拉长率,多余内容隐藏

    abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

成效:隐藏多余内容

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>

 

职能:能够换行

  1. (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的主意
运作代码框100素材网
聊到底,那种场地出现的概率不大,不过无法解决网上朋友的恶搞。如若

有何样难题请到在底下留言

上面是事关的例证的职能

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
 
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
 
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that 
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, 
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes 
precedence over the noWrap property in this scenario</div>
 
<h1><code>IE  word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE  word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF  table-layout:fixed; overflow:hidden;</code></h1>
<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>
</body>
</html>

机关换行难题,日常字符的换行是比较合理的,而三番五次的数字和英文字符平时将容器撑大,挺令人发烧,下边介绍的是CSS怎么样促成换行的法子

  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>
    效益:能够换行
  2. (IE浏览器)在td,th中嵌套div,p等利用地点提到的div,p的换行方法
  3. (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>
    效果:隐藏多于内容
    伍.(Firefox浏览器) 在td,th中嵌套div,p等使用地方提到的应付Firefox的方法

对此div,p等块级元素 

常规文字的换行(澳国文字和非亚洲文字)元素具有默许的white-space:normal,当定义的小幅度之后自动换行

html

<div
id=”wrap”>通常文字的换行(欧洲文字和非澳大俄克拉荷马城文字)成分具备暗许的white-space:normal,当定义</div>

css

#wrap{white-space:normal; width:200px; }

一.(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>

职能:能够兑现换行 

二.(Firefox浏览器)延续的英文字符和阿拉伯数字的断行,Firefox的具有版本的尚未解决那一个标题,大家唯有让超过边界的字符隐藏或然,给容器增添滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div
id=”wrap”>abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

职能:容器不荒谬,内容隐藏 

对于table 

  1. (IE浏览器)使用 table-layout:fixed;强制table的上升的幅度,多余内容隐藏 

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

<tr>

<td width=”25%” >abcdefghigklmnopqrstuvwxyz 1234567890

</td>

<td >abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

功能:能够换行 

  1. (IE浏览器)在td,th中嵌套div,p等选择地点提到的div,p的换行方法

  2. (Firefox浏览器)使用
    table-layout:fixed;强制table的宽度,内层td,th选择word-break :
    break-all;也许word-wrap : break-word
    ;换行,使用overflow:hidden;隐藏超越内容,那里overflow:auto;不大概起效果

<table width=”200″>

<tr>

<td width=”25%”  >abcdefghigklmnopqrstuvwxyz1234567890</td>

<td width=”75%” >abcdefghigklmnopqrstuvwxyz1234567890</td>

</tr>

</table>

效果:隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用地点提到的对付Firefox的主意

运营代码框

最后,那种情景出现的可能率一点都不大,可是无法去掉网络好友的恶搞。

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website