html元素自动换行设置

菜鸟小窝

已于 2022-05-13 21:38:14 修改

阅读量2.3w

点赞数 6

分类专栏： Web前端文章标签： html css 自动换行

于 2022-05-13 21:37:54 首次发布

本文链接：https://blog.csdn.net/qq_25775675/article/details/118329966

版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

一、div中文字换行

1、概述：

white-space：设置如何处理元素间的空白
- 默认为normal，表示空白会被浏览器忽略
- white-space:nowrap;表示不换行。
word-break：规定自动换行的处理方法。
- normal:使用浏览器默认换行规则，
- break-all：允许在单词内换行，
- keep-all：只能在半角空格或连字符处换行。
word-wrap：允许长单词或URL地址换行到下一行。
- normal：只在允许的断字点换行（浏览器保持默认处理）
- break-word：在长单词或URL地址内部进行换行。

2、案例

（1）html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.test_div{
			width: 300px;background: #eee;padding: 5px;margin: 0px 20px;
		}
	</style>
</head>
<body>

	<h4>默认</h4>
	<div class="test_div">
		风险得到稳妥化解ssdssdssssssshssfgssfgssfgssddgsadfasdfasffas风险防控长效体制机制建设adfasdfasfasddfassfa得到有力推进坚决惩治金融风险背后
	</div>

	<h4>word-wrap:break-word;</h4>
	<div class="test_div" style="word-wrap:break-word;">
	风险得到稳妥化解ssdssdssssssshssfgssfgssfgssddgsadfasdfasffas风险防控长效体制机制建设adfasdfasfasddfassfa得到有力推进坚决惩治金融风险背后
	</div>

	<h4>word-break: break-all;</h4>
	<div class="test_div" style="word-break: break-all;">
	风险得到稳妥化解ssdssdssssssshssfgssfgssfgssddgsadfasdfasffas风险防控长效体制机制建设adfasdfasfasddfassfa得到有力推进坚决惩治金融风险背后
	</div>
</body>
</html>

（2）效果

在这里插入图片描述

（3）换行css

若两个属性同时存在，以word-break: break-all;为准。

p{
  word-wrap:break-word;
  word-break: break-all;
}

二、表格内容换行

在显示长内容的td里面将内容放在div标签里面。给div标签加样式。