首頁 > web前端 > css教學 > 主體

word-break work-wrap的區別範例介紹

高洛峰
發布: 2017-03-04 10:29:22
原創
1654 人瀏覽過

word-break:【斷詞】

定義:規定自動換行的處理方法.   注意:透過word-break使用,可以實作讓瀏覽器在任意位置換行。

語法:word-break: normal|break-all|keep-all;

##預設值normal繼承性愛yescss3

##Javascript語法object.style.wordBreak="keep-all"值描述normal
 

#使用瀏覽器預設的換行規則。

break-all允許在單字內換行。

word-break work-wrap的区别示例介绍keep-all

只能在半角空格或連字號處換行。

word-break work-wrap的区别示例介绍

相容性:

word-break work-wrap的区别示例介绍

舉栗子:

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}
登入後複製

word-break work-wrap的区别示例介绍未設定word-break:

 

設定word-break:break-all;

 

設定word-break:keep-all;或是word-break:normal; word-wrap:【換行】語法:word-wrap: normal|break-word;#預設值:normalyes
 
 定義:允許長單字或URL 位址換行到下一行。

繼承性:

#版本:

CSS3

JavaScript 語法:.style.wordWrap="break-word"## 值
object
#描述############normal#### ##只在允許的斷字點換行(瀏覽器保持預設處理)。 ############break-word######在長單字或 URL 位址內部進行換行。 ############

Compatibility:

word-break work-wrap的区别示例介绍

##For example: [Same as above]

Word-wrap is not set:

word-break work-wrap的区别示例介绍

Set word-wrap:normal;

word-break work-wrap的区别示例介绍

Set word-wrap:break-word;

word-break work-wrap的区别示例介绍

Compare the above chestnut setting word The difference between -break:break-all; and word-wrap:break-word

word-break work-wrap的区别示例介绍

Summary:

word-break: When a word cannot be placed at the end of the line, determine how to place the word inside => Determine whether the word will break into a new line when the word cannot be placed at the end of the sentence

break-all:

Forcibly place it. If the remaining items cannot be squeezed in, they will be displayed on the next line.

keep-all: If it cannot fit, display it in another line; if it still cannot fit, it will display overflow.

word-wrap: When the end of the line cannot be placed, determine whether line wrapping is allowed within the word => Determine how to wrap the word within the word

normal: The word is too long and will be displayed in a new line. If it exceeds one line, it will be displayed in a new line. Overflow display.

break-word:

When the word is too long, try to wrap the word first; if it is still too long after the word wrap, you can also wrap the word .

Additional one: text alignment

Attribute: text-align:justify;

Compatibility: Very bad

word-break work-wrap的区别示例介绍

text-align:center;

word-break work-wrap的区别示例介绍

text-align:justify;

word-break work-wrap的区别示例介绍 ##The above brief analysis of the difference between word-break work-wrap is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more examples of the difference between word-break work-wrap and related articles, please pay attention to the PHP Chinese website!

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