一、單行文本、超出部分點點點

有寬度：width, 有寬度才能超出，所以至少是行內塊級元素

不能換行：white-space:nowrap;

超出部分隱藏：overflow: hidden;

文本超出部分點點點：text-overflow: ellipsis;

div {width: 200px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis; }

二、設置多行文本、指定行數、最后一行點點點

div {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; }

三、利用 Zent 組件庫 ClampLines【最簡單的…】

import { ClampLines } from 'zent';<div style={{ width: 400, color: '#666', fontSize: 14 }}><ClampLineslines={3}popWidth={400}showPop={false} // 是否顯示提示text="Zent ( \?zent\ ) 是有贊 PC 端 WebUI 規范的 React 實現，提供了一整套基礎的 UI 組件以及一些常用的業務組件。目前我們有 50+ 組件，這些組件都已經在有贊的各類 PC 業務中使用，我們會在此基礎上，持續開發一些新組件。我們的目標是讓 React 項目開發更快、更簡單。"/> </div>

showPop 屬性控制著是否顯示提示，默認為true 的時候如下，會有彈框提示：

四、多行點點點遇到的問題：數字不會自動換行，如圖：

利用 word-break: break-all; 屬性完美解決。

div{word-break: break-all; }

總結

以上是生活随笔為你收集整理的css设置单行文本超出部分点点点、多行文本超出部分点点点（两种方法）/解决多行 数字不换行问题。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。