整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。
當我們在編寫網頁代碼的時候，肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度，導致文本換行或者文本超出了界限，這時有人就會說了，讓后臺限制一下調用的文字個數不就行了嗎，但是我們在做響應式的時候由于是百分比布局，無法計算一行會顯示多少個文字，所以這并不是一個好的解決方案，我們使用css3就可以輕松的實現，而且簡單好用。
核心css語句：
1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
2、white-space: nowrap; （設置文字在一行顯示不能換行）
3、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置ul寬度為300，超出的文字內容讓其自動隱藏并顯示...）
我們在編寫網頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行后還能顯示省略號呢，不要慌，我們css還是很強大的，已經給我們提供了方法來處理這種問題了。
核心css語句：
1、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 為了實現該效果，它需要組合其他的WebKit屬性）
2、display: -webkit-box; （和1結合使用，將對象作為彈性伸縮盒子模型顯示 ）
3、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）
4、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
5、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置段落p寬度為300，超出2行的文字內容讓其自動隱藏并顯示...）
好了，本篇文章就給大家說到這里，大家自己下來可以自己找例子寫一下試一試到底能不能實現我們所說的效果，以后在寫頁面的的遇到這種問題的時候直接復制使用即可。
每日金句：必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
載鏈接：https://segmentfault.com/a/1190000020920000
在我們的日常開發工作中，文本溢出截斷省略是很常見的一種需考慮的業務場景細節。看上去 “稀松平常” ，但在實現上卻有不同的區分，是單行截斷還是多行截斷？多行的截斷判斷是基于行數還是基于高度？這些問題之下，都有哪些實現方案？他們之間的差異性和場景適應性又是如何？凡事就怕較真，較真必有成長。本文試圖通過編碼實踐，給出一些答案。
核心 CSS 語句
優點
短板
適用場景
Demo
<style>
.demo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div class="demo">這是一段很長的文本</div>
</body>示例圖片
核心 CSS 語句
優點
短板
適用場景
Demo
<style>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>示例圖片
優點
短板
適用場景
Demo
當前僅適用于文本為中文，若文本中有英文，可自行修改
<script type="text/javascript">
const text = '這是一段很長的文本';
const totalTextLen = text.length;
const formatStr = () => {
const ele = document.getElementsByClassName('demo')[0];
const lineNum = 2;
const baseWidth = window.getComputedStyle(ele).width;
const baseFontSize = window.getComputedStyle(ele).fontSize;
const lineWidth = +baseWidth.slice(0, -2);
// 所計算的strNum為元素內部一行可容納的字數(不區分中英文)
const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));
let content = '';
// 多行可容納總字數
const totalStrNum = Math.floor(strNum * lineNum);
const lastIndex = totalStrNum - totalTextLen;
if (totalTextLen > totalStrNum) {
content = text.slice(0, lastIndex - 3).concat('...');
} else {
content = text;
}
ele.innerHTML = content;
}
formatStr();
window.onresize = () => {
formatStr();
};
</script>
<body>
<div class='demo'></div>
</body>示例圖片
核心 CSS 語句
優點
短板
適用場景
Demo
<style>
.demo {
overflow: hidden;
max-height: 40px;
line-height: 20px;
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>
示例圖片
核心 CSS 語句
優點
短板
適用場景
Demo
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>示例圖片
核心 CSS 語句
優點
短板
適用場景
Demo
<style>
.demo {
background: #099;
max-height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo::before{
float: left;
content:'';
width: 20px;
height: 40px;
}
.demo .text {
float: right;
width: 100%;
margin-left: -20px;
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
}
</style>
<body>
<div class='demo'>這是一段很長的文本</div>
</body>示例圖片
原理講解
有 A、B、C 三個盒子，A 左浮動，B、C 右浮動。設置 A 盒子的高度與 B 盒子高度（或最大高度）要保持一致
凡重復的，讓它單一；凡復雜的，讓它簡單。
每次都要搞一坨代碼，太麻煩。這時候你需要考慮將文本截斷的能力，封裝成一個可隨時調用的自定義容器組件。市面上很多 UI 組件庫，都提供了同類組件的封裝，如基于 Vue 的 ViewUI Pro，或面向小程序提供組件化解決能力的 MinUI。
轉載鏈接：https://segmentfault.com/a/1190000020920000
說css最常見的知識，實現單行、雙行文本溢出顯示省略號！如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。
效果如下：
多行文本溢出顯示省略號的方法：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
