文本溢出隐藏展示省略号，单行、多行、半行

1、单行文本溢出隐藏

示例图：

style样式

<style>
  .box{
    width: 200px;
    border: 1px solid red;
    /* 下面三行代码配置溢出展示省略号 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
<div class="box">这是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长长长很长的文本</div>

2、多行文本溢出展示省略号

示例图：

style样式

<style>
  .box{
    width: 200px;
    border: 1px solid red;
    /* 下面四行代码配置溢出展示省略号 */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
</style>
<div class="box">这是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>

小程序中多行文本溢出展示省略号

display: -webkit-box; /设置为弹性盒子/
-webkit-line-clamp: 5; /最多显示5行/
overflow: hidden; /超出隐藏/
text-overflow: ellipsis; /超出显示为省略号/
-webkit-box-orient: vertical;
word-break: break-all; /强制英文单词自动换行/

示例

3、非整行展示省略号

先看示例：

示例

父组件内引用：

• line 控制多少行开始隐藏，可设置小数
• text 控制展示的文本

<template>
  <textExtend :line="1.7" :text="text" />
</template>

import textExtend from './components/textExtend.vue'
export default{
  components: {textExtend},
}

子组件：

• 图片路径记得换

<template>
  <div class="text-expand">
    <div ref="container" class="container_style" v-if="!expand">{{ string }}</div>
    <div ref="container" class="container_style" style="white-space: pre-line" v-else>{{ string }}</div>
    <div v-if="isCut" class="toggle_container">
      <p v-if="!expand" @click.stop="toggleContainer"><span>查看全部</span> <img src="../../../assets/images/result13.png" alt="" /></p>
      <p v-else @click.stop="toggleContainer"><span>折叠</span> <img src="../../../assets/images/result15.png" alt="" /></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'text-extend',
  props: {
    text: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      detault: 1.5
    },
  },
  data() {
    return {
      isCut: false,
      expand: false,
      string: '',
      maxLength: ''
    }
  },
  methods: {
    getMaxLength() {
      if (!this.$refs.container) {
        this.maxLength = this.text.length
        return
      }
      const { width } = this.$refs.container.getBoundingClientRect()
      const { fontSize } = getComputedStyle(this.$refs.container, null)

      const maxLength = Math.floor((width || 351) / parseInt(fontSize, 10)) * (this.line || 3) - 4 // 预计三行少8个字
      this.maxLength = maxLength
    },
    cutString(str, len) {
      // length属性读出来的汉字英文长度都为1，先把总的长度*2，遇到汉字+2，英文+1
      if (str.length <= len) return str
      let strlen = 0
      let s = ''
      for (let i = 0; i < str.length; i++) {
        s += str.charAt(i)
        strlen += str.charCodeAt(i) > 128 ? 2 : 1
        if (strlen >= len * 2) return `${s}...`
      }
      return s
    },
    toggleContainer() {
      this.expand = !this.expand
    }
  },
  watch: {
    text: {
      handler() {
        this.$nextTick(() => {
          this.getMaxLength()
          this.isCut = this.text.length > this.maxLength
          this.string = this.isCut ? this.cutString(this.text, this.maxLength) : this.text
        })
      },
      immediate: true
    },
    expand(val) {
      this.string = !val ? this.cutString(this.text, this.maxLength) : this.text
    }
  }
}
</script>

<style lang="less" scoped>
.text-expand {
  position: relative;
  font-size: 14px;
  .container_style {
    text-align: justify;
    line-height: 19px;
    font-size: 13px;
    word-break: break-all;
    position: relative;
    color: #40577e;
  }
  .toggle_container {
    p {
      height: 19px;
      line-height: 19px;
      float: right;
      color: #4689ff;
      font-size: 13px;
      transform: translateY(-19px);
      img {
        transform: translateY(-2px);
        width: 7.5px;
        height: 5px;
      }
    }
  }
}
</style>

*项目中使用到了，一时没有好的解决方法，然后问了我的好兄弟，摘抄自好兄弟 02584EA6.gif