怎樣在CSS中解決長英文單字的頁面顯示問題?

php中世界最好的语言
發布: 2018-02-28 10:01:59
原創
1559 人瀏覽過

簡言

在頁面排版中,經常遇到長英文單字溢出段落容器的情況,如何解決該問題?現編制如下比較示範程式:

示範程式

42du.cn-線上示範程式

部分html程式碼

<div class="block">    <h4>word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .break-all {    word-break: break-all;}.break-word {    word-wrap: break-word;}.hyphens {    word-wrap: break-word;    -webkit-hyphens: auto;    -ms-hyphens: auto;    hyphens: auto;}
登入後複製

問題

#在進行英文段落排版中,常常會碰到長英文單字的情況,一般在預設情況下,如果單字排版到了容器邊界,該單字會被自動移到下一行中顯示。而如果單字的長度大於容器寬度時,就會產生溢出容器邊界的情況。請參閱文中示範的第一部分,頁面上Extraordinarily長度溢出了容器邊界。

在CSS中提到單字斷行,自然就會想到word-break和word-wrap。具體差別對比,在演示的第二和第三部分對比可以看出來。

word-break: break-all;

上述聲明,如示範第二部分所示。單字排版到了容器邊界,該單字就會被斷開成兩部分,後一部分移到下一行顯示。這樣排版段落的右邊很整齊,我喜歡這種效果。但break-all會造成許多行末單字斷開,影響閱讀體驗。

word-wrap: break-word;

上述聲明,如示範第三部分所示。單字排版到了容器邊界,優先把單字移到下一行顯示。而當單字長度超過行寬度時,再斷開單字。即優先行內斷開,行內斷開不靈時、再採用單字斷開。這樣排版段落右側不夠整齊、有留白產生,但不會造成大量單字被斷開、也不會產生溢出。

hyphens: auto;

上述聲明,如示範第四部分所示。如果更深入一步,想為斷開的單字加一個連字號(-),可以採用hyphens: auto。但是目前該項聲明的兼容性很差。

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

JavaScript裡最常用的20個正規表示式

ajax的跨域問題如何解決

#

以上是怎樣在CSS中解決長英文單字的頁面顯示問題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!