1. 單行文本的處理
<style>
.single-line {
/* 1.首先得有個固定的寬高 */
width: 300px;
height: 30px;
line-height: 30px;
border: 1px solid red;
/* 2.text-overflow 屬性并不會強制“溢出”事件的發(fā)生，因此為了能讓文本能夠溢出容器，需要在元素上添加幾個額外的屬性：overflow 和 white-space。 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div class="single-line">Hook 讓你可以在組件中使用不同的 React 功能。你可以使用內(nèi)置的 Hook 或者把它們組合起來建立你自己的。本頁列出了 React 中所有的內(nèi)置 Hook。</div>
2. 多行文本的處理
<style>
.multi-line {
/* 1.定義寬高，高度正好包含三行 */
width: 300px;
height: 90px;
line-height: 30px;
border: 1px solid green;
/* 2. 大部分情況下，也需要設(shè)置 overflow 屬性為 hidden，否則，里面的內(nèi)容不會被裁減，并且在內(nèi)容顯示為指定行數(shù)后還會顯示省略號。 */
overflow: hidden;
display: -webkit-box;
/* 3. -webkit-line-clamp CSS 屬性可以把塊容器中的內(nèi)容限制為指定的行數(shù)。
只有在 display 屬性設(shè)置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 屬性設(shè)置成 vertical時才有效果。*/
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
<div class="multi-line">React 是一個用于構(gòu)建用戶界面（UI）的 JavaScript 庫，用戶界面由按鈕、文本和圖像等小單元內(nèi)容構(gòu)建而成。React 幫助你把它們組合成可重用、可嵌套的 組件。從 web
端網(wǎng)站到移動端應(yīng)用，屏幕上的所有內(nèi)容都可以被分解成組件。在本章節(jié)中，你將學(xué)習(xí)如何創(chuàng)建、定制以及有條件地顯示 React 組件。</div>
測試結(jié)果
文章來源地址http://www.zghlxwxcb.cn/news/detail-519157.html
文章來源：http://www.zghlxwxcb.cn/news/detail-519157.html
到了這里，關(guān)于使用overflow實現(xiàn)多行文本的溢出部分處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
