针对div,p等块级元素css怎样完成全自动换行

日期:2021-03-08 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

一切正常文本的换行(亚洲地区文本和非亚洲地区文本)元素有着默认设置的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的全部版本号的沒有处理这个难题,大家仅有让超过界限的标识符掩藏或,给器皿加上翻转条

拷贝编码
编码以下:

#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的方式
运作编码框
最终,这类状况出現的概率很小,可是不可以清除网友的恶搞。

下面是提到的事例的实际效果

拷贝编码
编码以下:

<!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;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</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>