文字溢出显示点点点
一段很長文字在頁面縮放顯示的時(shí)候會(huì)溢出，很多時(shí)候都是設(shè)置為溢出顯示點(diǎn)點(diǎn)點(diǎn)。
溢出顯示一行文字點(diǎn)點(diǎn)點(diǎn)，代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>溢出顯示點(diǎn)點(diǎn)點(diǎn)</title><style type="text/css">.dv{width:300px;height:150px;padding: 10px;border: 1px solid #ccc;/* 強(qiáng)制不換行 */white-space: nowrap;/* 文字的超出部分用省略號(hào)代替 */text-overflow: ellipsis;/* 隱藏溢出內(nèi)容 */overflow: hidden; }</style></head><body><div class="dv">這是一段超長的文字超長的文字，這是一段超長的文字真的超長超長超長的。這是一段超長的文字超長的文字，這是一段超長的文字真的超長超長超長的。</div></body> </html>效果圖如下：
?如果一段文字想要設(shè)置兩行顯示，超出部分點(diǎn)點(diǎn)點(diǎn)，代碼如下：
display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2;效果圖如下：
echarts圖的x軸設(shè)置文字兩行顯示，溢出部分顯示點(diǎn)點(diǎn)點(diǎn)，代碼如下：
// xAxis axisLabel: {interval: 0,//多出字可以省略顯示成點(diǎn)formatter: function (val) {var strs = val.split(""); //字符串?dāng)?shù)組var str = "";for (var i = 0, s; (s = strs[i++]); ) {if (i < 8) {if (i >= 7 && strs.length > 8) {str += "...";} else {//遍歷字符串?dāng)?shù)組str += s;}if (!(i % 4)) str += "\n"; //按需要求余}}return str;},textStyle: {fontSize: "10px", //x軸的字體大小color: "#000",},},element ui組件，el-table的顯示點(diǎn)點(diǎn)點(diǎn)出現(xiàn)tips代碼：
:show-overflow-tooltip="true"
總結(jié)
- 上一篇： macOS Command - soft
- 下一篇： 用Python多线程抓取并验证代理(转)