一段很长文字在页面缩放显示的时候会溢出,很多时候都是设置为溢出显示点点点。
溢出显示一行文字点点点,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>溢出显示点点点</title>
<style type="text/css">
.dv{
width:300px;
height:150px;
padding: 10px;
border: 1px solid #ccc;
/* 强制不换行 */
white-space: nowrap;
/* 文字的超出部分用省略号代替 */
text-overflow: ellipsis;
/* 隐藏溢出内容 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="dv">
这是一段超长的文字超长的文字,
这是一段超长的文字真的超长超长超长
的。这是一段超长的文字超长的文字,
这是一段超长的文字真的超长超长超
长的。
</div>
</body>
</html>
效果图如下:
如果一段文字想要设置两行显示,超出部分点点点,代码如下:
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轴设置文字两行显示,溢出部分显示点点点,代码如下:
// xAxis
axisLabel: {
interval: 0,
//多出字可以省略显示成点
formatter: function (val) {
var strs = val.split(""); //字符串数组
var str = "";
for (var i = 0, s; (s = strs[i++]); ) {
if (i < 8) {
if (i >= 7 && strs.length > 8) {
str += "...";
} else {
//遍历字符串数组
str += s;
}
if (!(i % 4)) str += "\n"; //按需要求余
}
}
return str;
},
textStyle: {
fontSize: "10px", //x轴的字体大小
color: "#000",
},
},
element ui组件,el-table的显示点点点出现tips代码:
:show-overflow-tooltip="true"