长字符串间的换行与单词间的换行-（word-break , word-warp）

最新推荐文章于 2022-09-16 09:47:22 发布

原创最新推荐文章于 2022-09-16 09:47:22 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #CSS #Css

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS属性实现文本自动换行和断行的方法，通过设置`word-wrap`和`word-break`属性，可以使长单词或URL在到达边界时自动换行，以适应不同的屏幕尺寸。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>word-break , word-warp</title>
</head>
<body>

<style type="text/css">
	div{ width:300px;word-wrap:word-break; word-break:break-word; border:1px solid #999999; height:auto;}
</style>
<div>
	wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword fdasfgdfhgfhf dfgfdghfdhgdhgfhsfhfdshfdghfdh 

dfdhgfdhgfdhgfd dfsgdsfgfdgdfs sdafdsfdsgrfd sdfgdsfgdagds dsdafsd fsa fdafdfadsfdsagad sdffgdsgfdsgfd fdasgdffgdaf 

dsfagfdagdfag asgdf gfdg dfagdasg gdfagfd
	</div>


</body>
</html>