如何實現兩行內容增多和一行內容增多，多餘的內容顯示省略號

時間 2019-12-05

標籤如何實現兩行內容增多一行多餘顯示省略號简体版

原文原文鏈接

最近工做常常會遇到這樣的UI設計圖，兩行內容增多出現省略號，通常這樣的解決方法我總會直接overflow:hidden隱藏，但是這樣他不會出現三個省略號，下面給你們想到一個很easy的方法分享一下；

方法一：適合PC和移動端，最主要的就是這段js，大概是這樣的原理： 1）獲取全部的元素.txt,經過遍歷循環，判斷他的內容個數，若是他的內容大於20（這個數值能夠隨意定義，大概範圍在你的一行是多少個字，根據兩行顯示字體總數定義這個數值範圍）； 2）獲取當前的對象，將他的內容設置成你截取的這段文字，經過字符串拼接添加省略號

$(".txt").each(function() { if ($(this).text().length > 20) { $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...") } })

如下是代碼，你們能夠參考。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .txt { width: 200px; height: 48px; background: pink; line-height: 24px; background: #ddd; color: #f00; margin-bottom: 10px; overflow: hidden; } </style> </head> <body> <div class="main"> <p class="txt">大學理學碩士,9 年證券從業經歷。曾任易方達基金管理有限公司金屬、非金屬行業研究員,2007 年 9 月加入國投瑞銀基金管理有限公司研究部。2014 年 7 月 24 日起任國投瑞銀景氣行業證券投資基金的基金經理,2014年 11 月 22 日起兼任國投瑞銀美麗中國靈活配置混合型證券投資基金基金經理,2015 年 3 月 14 日起兼任國投 </p> <p class="txt"> 要使用正則表達式，不能使用 str.replace("\r\n", newString); ，這會致使只替換第一個匹配的子字符串。 母字符串中不必定 \r\n 會同時存在，也許只有 \n，沒有 \r 也是可能的。 replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp能夠是正則表達式對象(RegExp)也能夠是字符串(string)，replaceText是替代查找到的字符串。。爲了幫助你們更好的理解，下面舉個簡單例子說明一下 </p> <p class="txt">好的哈哈的山東省不少事藉助龐大的投資藉助龐大的投資藉助龐大的投資藉助龐大的投資藉助龐大的投資 </p> <p class="txt">董晗先生,中國籍,南京大學理學碩士,9 年證券從業經歷。曾任易方達基金管理有限公司金屬、非金屬行業研究員,2007 年 9 月加入國投瑞銀基金管理有限公司研究部。2014 年 7 月 24 日起任國投瑞銀景氣行業證券投資基金的基金經理,2014年 11 月 22 日起兼任國投瑞銀美麗中國靈活配置混合型證券投資基金基金經理,2015 年 3 月 14 日起兼任國投 </p> </div> </body> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript"> // 這個能夠實現多行的，內容增多顯示省略號 $(".txt").each(function() { if ($(this).text().length > 20) { $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...") } }) // 這個不太實際，由於只能解決一行的，若是多行內容，顯示的內容都同樣 // var $len = $(".txt").text().length; // if ($len > 30) { // var $main = $(".txt").text().replace(/\s+/g, "").substr(0, 30) + "..."; // $(".txt").html($main) // } </script> </html>

方法二：CSS3實現，適合移動端，PC兼容性不是太好 -webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。 限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘外來的WebKit屬性。常見結合屬性： display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。 -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。 text-overflow，能夠用來多行文本的狀況下，用省略號「...」隱藏超出範圍的文本 。 語法： -webkit-line-clamp：<number> 默認值： ? ?表示不清楚； 適用於：塊元素 繼承性：無 動畫性：否 計算值：指定的值 取值： <number>： 塊元素顯示的文本的行數。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body> <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> static：對象遵循常規流。top，right，bottom，left等屬性不會被應用。 relative： 對象遵循常規流，而且參照自身在常規流中的位置經過top，right，bottom，left屬性進行偏移時不影響常規流中的任何元素。 absolute：對象脫離常規流，使用top，right，bottom，left等屬性進行絕對定位，盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。fixed：對象脫離常規流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。center：對象脫離常規流，使用top，right，bottom，left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。（CSS3）page：盒子的位置計算參照absolute。盒子在分頁媒體或者區域塊內，盒子的包含塊始終是初始包含塊，不然取決於每一個absolute模式。（CSS3） sticky： 對象在常態時遵循常規流。它就像是 relative 和 fixed 的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）* CSS3新增屬性可能存在描述錯誤及變動，僅供參考，持續更新 </p> </body> </html>

一行內容增多顯示省略號，代碼以下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0 } .box { width: 12.188rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: #ccc; } </style> </head> <body> <p class="box">經查證，古裝造型的照片來自1993年播出的電視劇《千歲情人》，在劇中王菲扮演一個活了千年的不老女子，古裝扮相也十分出衆，白衣飄飄，氣質動人。</p> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。