css完美的断行?
——不存在的。但是可以相对不那么惨不忍睹。
结论
css中对文字的断行,相当坑爹。总算整出来一个怎么操都比较给力的版本:
就是让 word-break:break-all
见鬼去吧,这个css不能很好适应中英文等等各种情况,有可能不断行。
要用就用word-wrap:break-word;
,同时,表格等要注意固定下,就可以了。表格固定:table-layout: fixed
。
断行测试
相关属性:
- word-break:break-all
- word-wrap:break-word
- overflow-wrap:break-word
代码
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<style>
.card-wrap,.line-table-wrap{
background: #E4FFE9;
width: 250px;
padding: 20px;
}
.cell1{
background-color: bisque;
}
.cell2{
background-color: darkseagreen;
}
.line-table-wrap table {
width: 100%;
table-layout: fixed;/*防止table被撑开,文字过多,而不断行时,会撑开table以适应文字大小*/
border: 1px solid #e6e6e6;
border-collapse: collapse;
}
.line-table-wrap tr th, .line-table-wrap tr td {
border: 1px solid #e6e6e6;
padding: 0.5rem;
white-space: normal;
}
</style>
</head>
<body>
<strong>div断行测试:</strong>
<p>word-break:break-all:</p>
<div class="card-wrap">
<div class="cell1" style="word-break:break-all">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="cell2" style="word-break:break-all">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
</div>
<p>word-wrap:break-word:</p>
<div class="card-wrap">
<div class="cell1" style="word-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="cell2" style="word-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
</div>
<p>同上,css3。overflow-wrap:break-word:</p>
<div class="card-wrap">
<div class="cell1" style="overflow-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>
<div class="cell2" style="overflow-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》》</div>
</div>
<p>
<strong>表格断行测试:</strong>
</p>
<p>word-break:break-all:</p>
<div class="line-table-wrap">
<table>
<tr>
<td class="cell1" style="word-break:break-all">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</td>
</tr>
<tr>
<td class="cell2" style="word-break:break-all">》》》》》》》》》》》》》》》》》》》》》》》》》》》》</td>
</tr>
</table>
</div>
<p>word-wrap:break-word:</p>
<div class="line-table-wrap">
<table>
<tr>
<td class="cell1" style="word-wrap:break-word">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</td>
</tr>
<tr>
<td class="cell2" style="word-wrap:break-word">》》》》》》》》》》》》》》》》》》》》》》》》》》》》</td>
</tr>
</table>
</div>
</body>
</html>
o了,就表格写法特殊点。
需要将table固定住,添加样式:
table-layout: fixed;
防止table被撑开,导致不换行。
代码效果预览:
https://thimbleprojects.org/mingyueyixi/438531/page/%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90/index.html
截图: