您的位置:时时app平台注册网站 > web前端 > css调控文字自动换行【彩世界网址】

css调控文字自动换行【彩世界网址】

2019-11-28 05:23

机关换行难题,寻常字符的换行是相比合理的,而一连的数字和越南语字符常常将容器撑大,挺令人胸口痛,上面介绍的是CSS怎么着兑现换

行的艺术

对于div,p等块级成分
常规文字的换行(澳大马拉Gavin字和非澳洲文字)成分具备暗中同意的white-space:normal,当定义的增幅之后自动换行

html

正规文字的换行(北美洲文字和非澳大哈利法克斯联邦(Commonwealth of Australia卡塔尔国文字)成分具有暗中同意的white-space:normal,当定义

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

1.(IE浏览器卡塔 尔(英语:State of Qatar)三番五次的泰语字符和阿拉伯数字,使用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>

功能:遮盖多于内容

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>

本文由时时app平台注册网站发布于web前端,转载请注明出处:css调控文字自动换行【彩世界网址】

关键词: