热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

css word-wrap自动换行样式

2023-04-12 21:22:00

一、word-wrap引见

word-wrap是设置对象内文字碰到对象顶边时是否采取换行排版组织。

1、语法
word-wrap:normal—— 应允模式顶开指定的容器边疆，碰到一连没有空格英文或没有空格数字不换行(默认，不设置对象也具有默认格式)
word-wrap:break-word —— 内容将在腹地内换行，当形式太多顶到对象鸿沟时，模式积极自愿换行。

2、思空见贯情况
对象内接连数字或字母太多后，内容顶边对象容器后不会换行，而是溢出持续不换行闪现。与汉字或有空格差异，汉字会定格容器要地本地会积极换行。

不换行的数字和英文字母
连气儿数字或字母造成不被动换行

3、应用语法
p{word-wrap:break-word}
配置html段落p内笔墨顶格对象容器边际被动换行。

二、被动换行word-wrap属性实例教程

1、代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css逼迫换行 CSS5实例</title>
<style>
.bos{ width:200px; height:80px; border:1px solid #F00; word-wrap: break-word; }
</style>
</head>

<body> <p class="bos">83480348023802ufjflsjfds843820483048jfdljfsl</p> </body> </html>

配置class=bos对象宽度，边框，里面放入接连不时文字和数字形式。如果不配置word-wrap: break-word大要涉猎器中考察到本教程文章一初阶的第一张图看到连续数字模式不换行超过跨过溢出盒子。

这里给予对象配置word-wrap: break-word勒迫换行花色。
换行自动换行对象默认设置模式

推荐阅读