写点什么

css3 多行文本多行文本缩略点击更多展开显示全部

作者:zhoulujun
  • 2024-04-21
    广东
  • 本文字数:1892 字

    阅读完需:约 6 分钟

比如我要实现如下效果:


20230930172619279762766.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

发布于: 刚刚阅读数: 4
用户头像

zhoulujun

关注

还未添加个人签名 2021-06-25 加入

15年草根站长,尽在:zhoulujun.cn

评论

发布
暂无评论
css3多行文本多行文本缩略点击更多展开显示全部_css3_zhoulujun_InfoQ写作社区