文字超出顯示省略號及更多

SummerSatr發表於2024-05-27

超出一行顯示省略號

html如下：

<div className='box'>
    時維九月，序屬三秋。
    潦水盡而寒潭清，煙光凝而暮山紫。
    儼驂騑於上路，訪風景於崇阿；
    臨帝子之長洲，得天人之舊館。
    層巒聳翠，上出重霄；
    飛閣流丹，下臨無地。
    鶴汀鳧渚，窮島嶼之縈迴；
    桂殿蘭宮，即岡巒之體勢。
</div>

css如下：

.box{
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    white-space: nowrap; // 先要阻止文字換行，一行顯示全部文字
    overflow: hidden; // 然後將超出容器的文字隱藏
    text-overflow: ellipsis; // 以省略號來表示被截斷的文字
}

頁面顯示如下：

超出多行顯示省略號

html同上。

css如下：

.box{
  display: -webkit-box; // 將容器設為彈性盒子模型
  -webkit-box-orient: vertical; // 設定盒子模型中的元素排列方向為從上到下垂直排列
  -webkit-line-clamp: 4; // 設定一個塊元素中顯示的文字的行數
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden; // 然後將超出容器的文字隱藏
}

這是我們最常見的做法，但是上述幾個屬性都是用於Webkit核心的瀏覽器中（如舊版本的Chrome和Safari），其它瀏覽器不支援。要相容現代瀏覽器，可使用下面的方法：

html如下：

<div className='boxWrap'>
    <div className='box'>
      <div className='ellipsis'>
          ...
      </div>
      <div className='text'>
          時維九月，序屬三秋。
          潦水盡而寒潭清，煙光凝而暮山紫。
          儼驂騑於上路，訪風景於崇阿；
          臨帝子之長洲，得天人之舊館。
          層巒聳翠，上出重霄；
          飛閣流丹，下臨無地。
          鶴汀鳧渚，窮島嶼之縈迴；
          桂殿蘭宮，即岡巒之體勢。
      </div>
    </div>
</div>

css如下：

.boxWrap{
  display: flex;
}
.box{
    width: 300px;
    max-height: 100px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.box::before{
    content:"";
    float: right; // 設定右浮動
    height: calc(100% - 20px); // 將高度設定為整個box的高度減去省略號佔的高度
}
.ellipsis{
    float: right; // 給省略號也設定右浮動
    line-height: 20px;
    clear: both; // 清除浮動，使得下面的元素不受浮動影響
}
.text {
    line-height: 20px;
}

頁面顯示如下：

上面的html中，由於父元素設定的max-height，子元素設定100%時獲取不到高度，所以在最外層又加了一層元素，將其設定為display:flex即可解決該問題。可參考 關於父元素設定min-height，子元素設定 height 100% 不生效的問題

超出多行顯示省略號及更多

html如下：

const [isExpanded, setIsExpanded] = useState(false)

// 點選更多展開全部
const handleMoreClick = () => {
  setIsExpanded(!isExpanded)
}

return (
    <div className='boxWrap'>
        <div className={`box ${isExpanded ? 'boxMore' : ''}`}>
            <div className='more' onClick={handleMoreClick}>
                {
                  isExpanded ? <span>收起</span> : <span>...更多</span>
                }
            </div>
            <div className='text'>
                時維九月，序屬三秋。
                潦水盡而寒潭清，煙光凝而暮山紫。
                儼驂騑於上路，訪風景於崇阿；
                臨帝子之長洲，得天人之舊館。
                層巒聳翠，上出重霄；
                飛閣流丹，下臨無地。
                鶴汀鳧渚，窮島嶼之縈迴；
                桂殿蘭宮，即岡巒之體勢。
            </div>
        </div>
    </div>
)

css如下：

.boxWrap{
  ·display: flex;
}
.box{
    width: 300px;
    max-height: 100px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.box::before{
    content:"";
    float: right;
    height: calc(100% - 20px);
}
.boxMore{
    max-height: none;
}
.more{
    float: right;
    line-height: 20px;
    clear: both;
    cursor: pointer;
    font-size: 14px;
    color: #2f54eb;
}
.text {
    line-height: 20px;
}

點選更多時，將box元素的高度設定為max-height: auto 即可展開所有的文字，頁面顯示如下:

相關文章