处理文字溢出省略号代替

html中处理文字溢出

单行显示，文本溢出省略号代替

tips: 一般在html标签中处理文字溢出，经常会限制标签的宽度，单行文字超出显示省略号。

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

• 效果图代码：

// css
.content {
	width: 200px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #ccc;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
// html
<div class='content'>
	vue项目F5刷新mounted里的函数不执行问题
</div>

• 效果图展示：

多行显示，文本溢出省略号代替

tips: 该方法使用了webkit的css扩展方法，仅适用于webkit浏览器与移动端

display: -webkit-box; //  将对象作为弹性伸缩盒子模型
-webkit-box-orient: vertical; // 子元素排列方式
-webkit-line-clamp: 3; // 限制的行数
overflow: hidden;

• 效果图代码：

// css
.content {
	width: 200px;
	border: 1px solid #ccc;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
// html
<div class='content'>
    vue项目F5刷新mounted里的函数不执行问题vue项目F5刷新mounted里的函数不执行问题vue项目F5刷新
</div>

• 效果图展示：

svg处理文字溢出

• 问题：一般使用svvg绘图时，经常使用text系列标签添加文字，此处使用html解决单行溢出并不可行。
• 解决：使用标签，设置标签width,height,x,y,该标签内部允许包含html标签,之后给对应的html标签添加样式即可

// css如单行显示，文本溢出省略号代替的css示例代码
// svg中的相关代码
<svg viewBox="0 0 200 200">
    <foreignObject x="20" y="20" width="160" height="160">
        <div class='content'>
            vue项目F5刷新mounted里的函数不执行问题
        </div>
    </foreignObject>
</svg>