html元素自动换行设置

一、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)效果

html元素自动换行设置_第1张图片

(3)换行css

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

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

二、表格内容换行

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

你可能感兴趣的:(Web前端,html,css,自动换行)