前端elementui el-popover 多行文本换行显示优化

前端多行文本换行显示优化

下载vue-ellipsis-text包，分析源码-自定义JfEllipsisText组件
使用场景：1.适用于单行文字超出显示省略号；
2.适用于多行文本超出指定行显示省略号（或追加【更多】按钮）

多行文本换行的样式：

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: pre-wrap;
word-break: break-word;  一行单词中实在没有其他靠谱的换行点的时候换行（针对英文）

v-ellipsis自定义指令
获取el.clienHeight和el.scrollHeight的值，来判断文本是否显示完整，是否需要下拉图标来显示全部的文本

directives: {ellipsis: {// 指令的定义inserted: function(el) {const dom = el.querySelector('[popover-ellipsis]')if (!dom) returnif (el.clientHeight < el.scrollHeight) {dom.style.display = 'inline-block'}}}},

// 弹窗显示隐藏handlePopoverShow() {const el = this.$refs.containerthis.popoverWidth = (el && el.clientWidth || 320) + 10this.$nextTick(() => {this.visible = !this.visible})},// 显示文本域详情handleFocus() {const el = this.$refs.containerthis.popoverWidth = (el && el.clientWidth || 320) + 10this.detailFlag = 1},

前端elementui el-popover 多行文本换行显示优化相关推荐

after不显示_web前端入门到实战：css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
phpcms v9 sql数据{$r[content]}，前端如何换行显示？
已解决:phpcms sql数据{$r[content]},前端如何换行显示一.效果图 · 前后对比: 1. [解决前] 问题场景 · 如下图所示: 2. [解决后]效果截图: 2. 问题: 问1: ...
ElementUI弹框组件 messageBox 如何换行？
ElementUI弹框组件 messageBox 如何换行 ? 参考博客:element this.$confirm确定框内容换行显示效果图 · 截图示下: demo代码如下: const conf ...
常见的 vue elementUI el的标签总结
vue elementUI el的标签总结标签源码标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...
html强制不换行隐藏,好程序员web前端培训分享HTML元素强制不换行
原标题:好程序员web前端培训分享HTML元素强制不换行好程序员web前端培训分享HTML元素强制不换行,HTML 中 nowrap是用来强制不换行的在排版中对包裹plain text的标签使用 ...
[element-ui] 手动控制 popover 弹层的显示与隐藏
ElementUI并没有给我们明确控制popover弹层显示与关闭状态的方法,但是通过ref获取元素之后发现,元素上面已经内置关闭和打开的方法 <el-popover ref="pop ...
css 单行文本和多行文本换行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
前端模拟终端（三）：文本显示与自动换行
目录前端模拟终端(一):如果我的这款 IOTerm 不是你想要的前端模拟终端(二):部分可输入而部分不可修改的多行文本域前端模拟终端(三):文本显示与自动换行前端模拟终端(四):显示.输入与光 ...
单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...

前端elementui el-popover 多行文本换行显示优化

前端多行文本换行显示优化

前端elementui el-popover 多行文本换行显示优化相关推荐

最新文章

热门文章