css3多行文本多行文本缩略点击更多展开显示全部
原创
比如我要实现如下效果：
image.png
数据集名称展示一行，超出自动省略，末尾增加编辑icon。点击编辑的icon，换成input 输入框
数据集描述最多展示三行，超出自动省略。末尾增加编辑icon。点击编辑的icon，换成textarea 输入框
展示一行省略+icon实现
单行省略实现，无非是这样
<div class="flex-row align-items-center full-width">
<div style="max-width: 192px">
<OverflowTitle>
{name.value}
</OverflowTitle>
</div>
<i
class="bkvision-icon icon-bianji text-link ml-min font-medium"
onClick={() => {
isEditedName.value = false;
nextTick(() => {
isEditedNameRef?.value?.focus();
});
}}
/>
</div>文本溢出省略加提示，可以参考 https://github.com/zhoulujun/textOverflowTitle
多行文本省略
多行文本省略，css3也有属性。主要靠webkit-line-clamp
具体样式如下：
.multi-text-over {
background: #fff;
position: relative;
word-break: break-all;
/* autoprefixer: off */
display: box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: normal;
overflow: hidden;
&-more {
position: absolute;
right: 0;
bottom: 0;
background: inherit;
}
&-icon {
margin-left: 4px;
color: #3a84ff;
cursor: pointer;
font-size: 16px;
}
}如何做到自适应呢？
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import './index.scss'
import { EditLine } from 'bkui-vue/lib/icon'
export default defineComponent({
name: 'TextExpander',
props: {
emptyText: {
type: String,
default: '--'
},
line: {
type: Number,
default: 3
},
lineHeight: Number,
content: String
},
emits: ['click'],
setup(props, { emit, slots }) {
const boxRef = ref<HTMLElement>(null)
const icon = slots.icon ? slots.icon() : (
<EditLine class='multi-text-over-icon' onClick={() => emit('click')} />
)
const isOverflow = ref(false)
onMounted(() => {
nextTick(() => {
const { clientHeight, scrollHeight } = boxRef.value
isOverflow.value = scrollHeight > clientHeight
})
})
return () => (
<div class='multi-text-over' ref={boxRef} style={{ '-webkit-line-clamp': props.line }}>
<span title={isOverflow.value ? props.content : ''}>{props.content || '--'}</span>
{isOverflow.value ? (<div class='multi-text-over-more'>...{icon}</div>) : (
<span>{icon}</span>)}
</div>
)
}
})具体参看：https://github.com/zhoulujun/text-expander
当然这个高度，是外面容器给的。
如何自适应比如给定高度，自定计算webkit-line-clamp为几行呢？
这个这个不能直接用box.value.style.lineHeight，获取的为空字符串
具体代码如下：
let element = document.getElementById('yourElementId'); // 用你的元素ID替换 'yourElementId'
let style = window.getComputedStyle(element);
let lineHeight = style.getPropertyValue('line-height');
if (lineHeight === 'normal') {
// 如果行高是 'normal'，则获取字体大小并乘以约1.2
let fontSize = parseFloat(style.getPropertyValue('font-size'));
lineHeight = Math.round(fontSize * 1.2) + 'px';
}
console.log(lineHeight);当然1.2 是不对，也有可能是1.5。这个代码么有通用性。这个需要给定行高。
然后通过高度除以函告，自动计算出展示几行。
参考文章：
CSS 实现多行文本“展开收起” https://juejin.cn/post/6963904955262435336
转载本站文章《css3多行文本多行文本缩略点击更多展开显示全部》, 请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2023_0930_8985.html
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
