css3多行文字多行文字縮略點選更多展開顯示全部

zhoulujun發表於2024-04-21
CSSS3

比如我要實現如下效果：

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

相關文章