React 文本溢出處理

時間 2019-11-09

標籤 react 文本溢出處理欄目 React 简体版

原文原文鏈接

在文字超出文本框限定區域的時候，咱們通常要進行溢出處理，把多餘的顯示不下的文字用...代替，以前用js，css處理時候咱們能夠使用webkit屬性進行css操做，例如css

一行文本溢出能夠直接使用這三個屬性

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
複製代碼

多行文本（

適用於WebKit瀏覽器及移動端），還有其餘的結合js操做隱藏溢出元素的就不寫啦html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div style = 'width:400px; height:70px; border:1px solid black;'>
           <p style='display:-webkit-box; //將對象做爲彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; //從上到下垂直排列子元素 -webkit-line-clamp:2; //這個屬性不是css的規範屬性，須要組合上面兩個屬性，表示顯示的行數。 overflow:hidden;'>
                 吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧
             啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦
         </p>
</div>
</body>
</html>
複製代碼

搭配react實現

然而遇到react的時候 👿，而且上面那個方法兼容性也不是很好，而後就找到了以下方法💃 使用LinesEllipsisLinesEllipsis詳細介紹react

import LinesEllipsis from 'react-lines-ellipsis'
<LinesEllipsis text={你要用的文本} maxLine={3} 
ellipsis='...' trimRight basedOn='letters' />
複製代碼

點擊閱讀更多

輕鬆搞定✌️，而後結合state控制就也很方便實現相似點擊閱讀更多，收起的功能啦，根據state值控制maxLine的值例如 maxLine={showAllMsg ? 50 : 3}就ok啦web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

React 文本溢出處理

一行文本溢出 能夠直接使用這三個屬性

多行文本（

搭配react實現

點擊閱讀更多

一行文本溢出能夠直接使用這三個屬性