cari

Rumah  >  Artikel  >  hujung hadapan web  >  css中字符换行的一些问题

css中字符换行的一些问题

高洛峰
高洛峰asal
2016-11-24 13:24:151538semak imbas

css中word-break可以解决这个问题，写个测试页面来做个笔记

 css代码：

 body{font-size:14px;}
 p{ border:solid 1px red;width:200px;}
 
 
 
<body>
    <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
        123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
       
    </p>
</body>

 

此时的运行效果如开题处所说，下面给p标签加点样式

 css代码：

.test{ word-break:break-all;}

 可以发现所有的文字不管是中文还是英文还是数字都可以在包裹的p标签的末尾位置自动强制转行，这会有一个问题，会把本来是一个组合的字符串拆分看影响效果，再看一个

 

css代码：

.test {word-break:hyphenate;}


此css将可能会撑破包裹元素的字符段在断字点进行提前换行

 

再看

 

css代码：

 .test{ word-break:keep-all;}


在所有的字符段和字符段之间的空格处换行，保留了所有字符段的完整性。撑破包裹元素

 

word-break还有一些属性：

 

css代码：

 .test{ word-break:normal;}/*浏览器默认换行*/


如果无需保持单词的完整性，break-all可以解决撑破容器的问题，因为在实际应用过程中不会有长度能超过一个容器宽度的单词，所以hyphenate能解决即要单词完整又能不撑破容器，其次在有些场景下可以采用滚动条或者overflow:hidden等来保持界面的完整。


Kenyataan：
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
Artikel sebelumnya：css伪类before after 实现立体效果Artikel seterusnya：css--关于visibility设置 “collapse”值问题

Artikel berkaitan

Lihat lagi