css3 word-wrap属性笔记

原创 国哥笔记  2017-12-26 18:11  阅读 1,035 views 次

word-wrap属性定义及用法

在css中,word-wrap属性是用来定义长的内容可以自动换行,当有一个长的单词或长url地址在元素的一行装不下的情况下,浏览器默认是不会换行的,长的单词或长url地址会超出元素边界显示,为了避免这种情况,我们可以设置word-wrap属性来来解决。

语法格式:

word-wrap: normal/break-word;

一、word-wrap: normal;(默认)

允许内容顶开指定的容器边界,如果单词或url地址超长,元素的一行装不下,超出的部分会冲出边界显示。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word-wrap:normal</title>
<style>
#ww{width:200px;height:200px;border:1px solid red;}
p{word-wrap:normal;}
</style>
<head/>
<body>
<div id="ww">
<h1>长单词</h1>
<p>floccinaucinihilipipification</p>
<p>supercalifragilisticexpiadocious</p>
</div>
</body>
</html>

运行结果:

css3 word-wrap属性笔记

二、word-wrap:break-word;

内容会在元素边界内换行,不会超出元素的边界。当长单词或长url地址在当前行放不下时,会自动切换到下一行开始。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word-wrap:break-word</title>
<style>
#ww{width:200px;height:200px;border:1px solid red;}
p{word-wrap:break-word;}
</style>
<head/>
<body>
<div id="ww">
<p>supercalifragilisticexpiadocious</p>
<p>国哥笔记的logo的url地址是https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png</p>
</div>
</body>
</html

运行结果:

css3 word-wrap属性笔记

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-word-wrap.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情