首頁  >  文章  >  web前端  >  CSS3如何實現自動換行效果

CSS3如何實現自動換行效果

清浅
清浅原創
2018-12-06 14:28:018293瀏覽

CSS3實現自動換行效果的方法:1、透過word-break屬性實現自動換行效果;2、透過word-wrap屬性來實現自動換行效果。

CSS3如何實現自動換行效果

本文操作環境:Windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS3中要實現自動換行的效果可以透過word-break屬性或word-wrap屬性來實現

在CSS3中有一個新的屬性可以讓文字自動換行,尤其在內容多的文字中換行是一件很重要的事,接下來在文章中將為大家介紹有哪些換行屬性以及它們的用法

word-break屬性

#自動換行屬性,使用word-break屬性,可以讓瀏覽器實作在任何位置換行

它有三個屬性值分別為:

normal: 瀏覽器中的預設換行行為

break-all:可允許在單字內換行    

keep-all:只能在半角空格或連字號處進行換行

##【推薦課程: CSS3教學

#範例:

<style>
.p1{
width:200px;
border:1px solid #ccc;
word-break:normal;
}

.p2{
width:200px;
border:1px solid #ccc;
word-break:keep-all;
}

.p3{width:200px;
border:1px solid #ccc;
word-break:break-all;
}
</style>
</head>
<body>
<p class="p1">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p>
<p class="p2">Php Chinese website provides a large   number of free, original, high-definition php video tutorials.</p>
<p class="p3">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p>
</body>

效果圖如下

CSS3如何實現自動換行效果

work-wrap屬性

允許長字或URL 位址換行到下一行

它有兩個屬性值,分別為

normal:只能允許在斷字點處進行換行是瀏覽器的預設行為

break-word:可以允許在長單字或URL位址的內部進行換行

例:

<style>
.p1{width:200px;
border:1px solid #ccc;
word-wrap:normal;
}
.p2{
width:200px;
border:1px solid #ccc;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="p1">PhpChinesewebsiteprovidesalargenumber of free, original, high-definition php video tutorials.</p>
<p class="p2">PhpChinesewebsiteprovidesalargenumber of free, original, high-definition php video tutorials.</p>
</body>

效果圖如下:

 CSS3如何實現自動換行效果

#其實work-wrap與work-break的用法都差不多,實現的功能基本上一樣,只不過work-wrap針對的是長字過著url地址。

總結:以上就是這篇文章的全部內容了,希望透過這篇文章能夠讓大家對於CSS3中的自動換行有一定的了解

以上是CSS3如何實現自動換行效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn