CSS+div 控制多行文本的顯示，多餘的以省略號顯示

時間 2019-12-14

標籤 css+div css div 控制行文顯示多餘省略號欄目 CSS 简体版

原文原文鏈接

Docuhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .comment_inner{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 將對象做爲伸縮盒子模型顯示 **/
    -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 顯示的行數 **/
    overflow: hidden;  /** 隱藏超出的內容 **/
    }   
</style>
<body>
     
      
<div>
   <p class="comment_inner">
word-break 屬性規定自動換行的處理方法。normal(使用瀏覽器默認的換行規則。),break-all(容許在單詞內換行。),keep-all(只能在半角空格或連字符處換行。)
   </p>
</div> 
     
</body>
</html>

mentweb

word-break 屬性規定自動換行的處理方法。normal(使用瀏覽器默認的換行規則。),break-all(容許在單詞內換行。),keep-all(只能在半角空格或連字符處換行。)瀏覽器

相關標籤/搜索