文字溢出显示点点点

小小红色无花果

已于 2022-08-16 21:58:51 修改

阅读量1.6k

点赞数

文章标签： css html javascript

于 2022-08-08 23:29:37 首次发布

本文链接：https://blog.csdn.net/weixin_45096939/article/details/125306361

版权

一段很长文字在页面缩放显示的时候会溢出，很多时候都是设置为溢出显示点点点。

溢出显示一行文字点点点，代码如下：

<!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"