首頁 > web前端 > html教學 > html中p標籤文字換行與不換行以及文字隱藏詳解

html中p標籤文字換行與不換行以及文字隱藏詳解

黄舟
發布: 2017-07-03 13:32:31
原創
7169 人瀏覽過

在我們網頁佈局的時,用到p標籤,通常p標籤裡包含的是漢語文字或其他國家的文字,是文字就會有換行,下面來說p標籤的文字換行與強制它不換行以及文字隱藏:
一、英文換行

Div p{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
Div p{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
登入後複製

注意有的時候英文單字是一個整體不能拆開! ! !
二、中文換行以及強制不換行

Div p{white-space:pre-wrap;width:150px;}/*只对中文起作用,强制换行*/
Div p{white-space:nowrap;width:10px;}/*强制不换行,都起作用*/
登入後複製

三、強制不換行以及超出寬度部分文字隱藏

.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/
登入後複製


一定要注意div或者p標籤裡面要有一個寬度才可以換行,要不然沒有作用! ! !

html中p標籤文字換行與不換行以及文字隱藏詳解

參數:
normal:依照亞洲語言和非亞洲語言的文字規則,允許在字內換行
break-all:該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all:與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本

以上是html中p標籤文字換行與不換行以及文字隱藏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板