文本縮略問題-位置-有解無憂

文本縮略問題

有的要求是單行文本末尾有省略符號
有的要求是多行文本有省略符號
有的要求是單行文本中間有省略符號
有的要求是多行文本可展開伸縮的末尾省略符號
下面代碼在react下可直接使用(class -> className)

單行省略末尾

css

{/* 單行省略末尾 css */}
<p className="uniline-end-wrapper">
  君不見黃河之水天上來，奔流到海不復回
</p>

/* 單行省略末尾 */
.uniline-end-wrapper {
  width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行省略末尾

css

{/* 多行省略末尾 css */}
<p className="textarea-end-wrapper">
  君不見高堂明鏡悲白發，朝如青絲暮成雪， 人生得意須盡歡，莫使金樽空對月
</p>

/* 多行省略末尾
  -webkit-line-clamp是webkit的私有屬性，是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中，
  -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數， 為了實作該效果，它需要組合其他的WebKit屬性，常見結合屬性：
  display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 ，
  -webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 ，
*/
.textarea-end-wrapper {
  width: 120px;
  /* 自動隱藏文字 */
  overflow: hidden;
  /* 文字隱藏后添加省略號 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 控制行數 */
  -webkit-line-clamp: 2;
}

單行省略中間

css

{/* 單行省略中間 css */}
<p className="uniline-middle-wrapper">
 <span className="left">天生我材必有用，千金散盡還</span>
 <span className="right">復來.png</span>
</p>

/* 單行省略中間 */
.uniline-middle-wrapper {
  display: flex;
  max-width: 180px;
  overflow: hidden;
}

.uniline-middle-wrapper .left {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.uniline-middle-wrapper .right {
  white-space: nowrap;
}

可展開伸縮的省略末尾

文本內容截斷處理-LinesEllipsis
控制maxLine即可

import LinesEllipsis from "react-lines-ellipsis";

{/* 多行省略 兼容性好 引數控制 */}
<p className="textarea-end-wrapper">
  <LinesEllipsis
    text="烹羊宰牛且為樂，會須一飲三百杯，岑夫子，丹丘生，將進酒，杯莫停，
  與君歌一曲，請君為我傾耳聽，"
    maxLine="3"
    ellipsis="..."
    trimRight
    basedOn="letters"
  />
</p>
``

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258741.html

標籤：其他

上一篇：關于Java Script中的正則運算式的問題

下一篇：spring security+oauth2退出登錄（一）-正常的退出登錄