Rumah hujung hadapan web tutorial css word-break work-wrap的区别示例介绍

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

Mar 04, 2017 am 10:29 AM

word-break:【断词】

定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行。

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

默认值 normal
继承性 yes
版本 css3
Javascript语法 object.style.wordBreak="keep-all"

 

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


兼容性:

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

举个栗子:

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}
Salin selepas log masuk

未设置word-break:

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

 

设置word-break:break-all;

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

 

设置word-break:keep-all;或者word-break:normal;

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

 

word-wrap:【换行】

 定义:允许长单词或 URL 地址换行到下一行。

语法:word-wrap: normal|break-word;

默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"


 

描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

 

兼容性:

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

举个栗子:【和上面一样】

未设置word-wrap:

 

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

 

设置word-wrap:normal;

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

 

设置word-wrap:break-word;

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

 

对比上述栗子设置word-break:break-all;和word-wrap:break-word的差别

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

 

总结:

word-break:当行尾放不下一个单词时,决定单词内部怎么摆放 => 决定句子末尾放不下单词时,单词是否换行

    break-all:强行摆放,挤不下剩下的就换下一行显示。

    keep-all:放不下,就另外起一行展示;如果还放不下就溢出显示。

word-wrap:当行尾放不下时,决定单词内是否允许换行 => 决定单词内该怎么换行

    normal:单词太长,换行显示,在超过一行就溢出显示。

    break-word:当单词太长时,先尝试换行;换行后还是太长,单词内还可以换行

 

附加一个:文字两端对齐

属性:text-align:justify;

兼容性:十分不好

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

text-align:center;

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

text-align:justify;

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

以上这篇浅析word-break work-wrap的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多word-break work-wrap的区别示例介绍相关文章请关注PHP中文网!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses Mar 08, 2025 am 09:45 AM

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Tunjukkan, jangan beritahu Tunjukkan, jangan beritahu Mar 16, 2025 am 11:49 AM

Tunjukkan, jangan beritahu

Apa yang ada perintah npm? Apa yang ada perintah npm? Mar 15, 2025 am 11:36 AM

Apa yang ada perintah npm?

See all articles