处理文字溢出省略号代替

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
vue项目F5刷新mounted里的函数不执行问题
  • 效果图展示:

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

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
vue项目F5刷新mounted里的函数不执行问题vue项目F5刷新mounted里的函数不执行问题vue项目F5刷新
  • 效果图展示:

svg处理文字溢出

  • 问题:一般使用svvg绘图时,经常使用text系列标签添加文字,此处使用html解决单行溢出并不可行。
  • 解决:使用标签,设置标签width,height,x,y,该标签内部允许包含html标签,之后给对应的html标签添加样式即可
// css如单行显示,文本溢出省略号代替的css示例代码
// svg中的相关代码

    
        
vue项目F5刷新mounted里的函数不执行问题

你可能感兴趣的:(问题解决,文字溢出,svg文字溢出,文字溢出,foreignObject)