In the near future, the company needs to display the content of a certain field in the table in two lines. If it exceeds two lines, it needs to be displayed. Here, the ui framework used by the company is iview, so simply modify the table component. A few questions, record here
1. How to make more than 2 lines display dot
misc.js
// 表格中内容超出后 显示... 鼠标移入并tip提示
/**
* @param {
*} h
* @param {
*} lines 最多显示多少行，超出后显示...
* @param {
*} content 显示的内容
* @returns tip
* @example {
key: "vtmName",
title: "标题",
align: "center",
render: (h,params) => {
return toolTip(h, 2, params.row.vtmName)
}
}
*/
export const toolTip = (h, lines, content) => {
return h('Tooltip', {
props: {
placement: 'bottom-start',
transfer: true
}
}, [
h('span', {
style: {
textOverflow: 'ellipsis',
whiteSpace: 'normal',
overflow: 'hidden',
display: '-webkit-box',
webkitBoxOrient: 'vertical',
webkitLineClamp: lines + ''
}
}, content),
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
}, content)
])
}
// 带超链接点击
/**
* @param {
*} h
* @param {
*} lines 最多显示多少行，超出后显示...
* @param {
*} content 显示的内容
* @param {
*} url url链接地址
* @returns tip
* @example {
key: "vtmName",
title: "标题",
align: "center",
render: (h,params) => {
return toolTipLink(h, 2, params.row.vtmName)
}
}
*/
export const toolTipLink = (h, lines, content, url) => {
return h('Tooltip', {
props: {
placement: 'bottom-start',
transfer: true,
content: content
}
}, [
h("a", {
domProps: {
href: url
},
style: {
textOverflow: 'ellipsis',
whiteSpace: 'normal',
overflow: 'hidden',
display: '-webkit-box',
webkitBoxOrient: 'vertical',
webkitLineClamp: lines + ''
}
}, content)
])
}`
Use in vue
import {
toolTip , toolTipLink } from 'msic.js的path'
columns: [
{
key: "vtmName"
title: "标题",
align: "center",
render: (h,params) => {
//我这里是超出2行后显示... ， 并提示tip
return toolTip(h, 2,params.row.vtmName)
// 带超链接点击的
//return toolTipLink(h,2,params.row.vtmName, 'https://www.baidu.com跳转的url')
}
},
]
Results as shown below
2. -webkit-line-clamp compatibility issues (Firefox, IE)
-webkit-line-clamp itself is not a formal css attribute, it is currently applicable to browsers with webkit as the core.
Therefore, when we need two lines of characters, if the extra part is replaced with "...", then there is a problem with IE and lower versions of the Firefox browser. The solution is as follows
:
.content {
font-size: 14px;
color: #4A4A4A;
overflow: hidden;
line-height: 26px;
position: relative;
height: 45px;
}
.content :after {
content: '...';
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 1.8em;
height: 45px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
The displayed part in the picture will be a bit blurred. If Firefox or chrome needs to display more normally at this time, then it is necessary to strictly judge whether the browser is an IE browser. If so, then use the current method to modify the css style.
Use javascript to make a compatibility judgment:
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
document.documentElement.className += " ie";
}
.content {
font-size: 14px;
color: #4A4A4A;
overflow: hidden;
line-height: 26px;
position: relative;
height: 45px;
}
.ie .content :after {
content: '...';
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 1.8em;
height: 45px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
3. Scalability: text wrapping, as shown in the
html below
<div class="box">
<div class="text-overflow">
<span class="tag">new</span>
很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容很多文本内容
</div>
</div>
css
.box {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-overflow {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
line-height: 1.425;
background-color: pink;
}
.tag {
float: right;
padding: 0 2px;
color: #fff;
background-color: #f32600;
border-radius: 2px;
}