文本截断省略号

来源：互联网发布：ubuntu mysqlsla 编辑：程序博客网时间：2024/05/18 00:33

纯CSS实现省略号

只要支持-webkit-line-clamp和float即可

原理是根据浮动文档流和line-clamp属性的特点进行溢出隐藏和视图内显示（参考原文）

<!DOCTYPE html><html><body><style>/* * 行高 h * 最大行数 n * ...更多容器的宽 w * 字号 f */@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}.ellipsis {    position: relative;    background: rgb(230, 230, 230);    width: 260px;    max-height: 108px; /* h*n */    line-height: 18px; /* h */    overflow: hidden;    -webkit-animation: width-change 8s ease infinite;}.ellipsis-container {    position: relative;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 6; /* n */    font-size: 50px; /* w */    color: transparent;}.ellipsis-content {    color: #000;    display: inline;    vertical-align: top;    font-size: 12px; /* f */}.ellipsis-ghost {    position:absolute;    z-index: 1;    top: 0;    left: 50%;    width: 100%;    height: 100%;    color: #000;}.ellipsis-ghost:before {    content: "";    display: block;    float: right;    width: 50%;    height: 100%;}.ellipsis-placeholder {    content: "";    display: block;    float: right;    width: 50%;    height: 108px; /* h*n */}.ellipsis-more {    position: relative;    float: right;    font-size: 12px; /* f */    width: 50px; /* w */    height: 18px; /* h */    margin-top: -18px; /* -h */}</style><div class="ellipsis">    <div class="ellipsis-container">        <div class="ellipsis-content">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>        <div class="ellipsis-ghost">            <div class="ellipsis-placeholder"></div>            <div class="ellipsis-more">...更多</div>        </div>    </div></div>   </body></html>

js实现省略号、查看更多和收起

相对于以上方法，这个方法配置更具灵活性，而且已经封装成组件（参考原文）

<template>  <div class="ellipsis-plus" ref="container">    <span class="ellipsis-plus-txt" ref="txt">中</span>    <span class="ellipsis-plus-ellipsis" ref="ellipsis" :style="{'display':show?'none':'inline-block'}">{{ ellipsis }}</span>    <button class="ellipsis-plus-button" v-if="showButton" :style="{ 'margin-left' : (show ? (marginLeft+'px'):collapseMarginLeft+'px')}" ref="more" @click="handleClick">{{ show ? collapseText: expandText }}</button>  </div></template><script>  export default {    name: 'ellipsis-plus',    props: {      text: String,      line: {        type: Number,        default: 2      },      ellipsis: {        type: String,        default: '...'      },      showButton: {        type: Boolean,        default: true      },      expandText: {        type: String,        default: '展开全部',        validator(value) {          return value && value.trim().length        }      },      collapseText: {        type: String,        default: '收起',        validator(value) {          return value && value.trim().length        }      }    },    data() {      return {        tmpTxt: '',        show: false,        marginLeft: 0,        collapseMarginLeft: 0      }    },    created() {    },    mounted() {      if (!this.line) {        return      }      let everywidth = this.$refs.txt.offsetWidth      this.$refs.txt.innerHTML = this.text      let containerWidth = this.$refs.container.offsetWidth      let btnWidth = 0      let btnWidthExpand = 0      let ellipsisWidth = this.$refs.ellipsis.offsetWidth      if (this.showButton) {        btnWidthExpand = btnWidth = Math.ceil(parseFloat(getComputedStyle(this.$refs.more, null)['width'].replace('px', '')))        this.$refs.ellipsis.style.display = 'none'        let left = 0        let btnClone = this.$refs.more.cloneNode()        if (this.expandText !== this.collapseText) {          this.$refs.more.style.display = 'none'          btnClone.innerHTML = this.collapseText          btnClone.style.display = 'inline-block'          this.$refs.container.appendChild(btnClone)          btnWidthExpand = Math.ceil(parseFloat(getComputedStyle(btnClone, null)['width'].replace('px', '')))          left = btnClone.offsetLeft        }        // 魔法数字 5        if (btnClone.offsetTop <= this.$refs.ellipsis.offsetTop + 5) {          this.marginLeft = (containerWidth - btnWidthExpand - left + ellipsisWidth)        } else {          this.marginLeft = containerWidth - btnWidthExpand - left        }        btnClone.remove()        this.$refs.more.style.display = 'inline-block'        this.$refs.ellipsis.style.display = 'inline-block'      }      let style = getComputedStyle(this.$refs.container, null)      let lineHeight = parseFloat(style['lineHeight'].replace('px', ''))      this.$refs.txt.innerHTML = this.text      if (Math.floor(this.$refs.container.offsetHeight / lineHeight) <= this.line) {        this.tmpTxt = this.text        this.show = true        this.showButton = false        return      }      let initNum = Math.floor((containerWidth * this.line - btnWidth - ellipsisWidth) / everywidth)      let increase = 1      this.$refs.txt.innerHTML = this.text.substr(0, initNum)      if (Math.round(this.$refs.container.offsetHeight / lineHeight) > this.line) {        increase = -1      }      for (let i = initNum; i < this.text.length; (i = i + increase)) {        if (i < 0 || i > this.text.length) {          return        }        this.$refs.txt.innerHTML =  this.text.substr(0, i)        if (increase === 1 && Math.round(this.$refs.container.offsetHeight / lineHeight) > this.line) {          this.tmpTxt = this.text.substr(0, i - 1)          this.$refs.txt.innerHTML = this.tmpTxt          if (this.showButton) {            let left = this.$refs.more.offsetLeft            this.collapseMarginLeft = containerWidth - btnWidth - left - 1          }          break        } else if (increase === -1 && Math.round(this.$refs.container.offsetHeight / lineHeight) === this.line) {          this.tmpTxt = this.text.substr(0, i)          this.$refs.txt.innerHTML = this.tmpTxt          if (this.showButton) {            let left = this.$refs.more.offsetLeft            this.collapseMarginLeft = containerWidth - btnWidth - left - 1          }          break        }      }    },    methods: {      handleClick() {        if (this.show) {          this.collapse()        } else {          this.expand()        }      },      expand() {        if (!this.show) {          this.show = true          this.$refs.txt.innerHTML = this.text        }      },      collapse() {        if (this.show) {          this.show = false          this.$refs.txt.innerHTML = this.tmpTxt        }      }    }  }</script><style rel="stylesheet/stylus" lang="stylus">  .ellipsis {    &-plus{      width:100%;      position: relative;      line-height: 1.5;      &-button {        padding-top:0;        padding-bottom:0;        border:0;        font-size: 1em;        vertical-align: middle;        color: #8590a6;        outline: none;        line-height: 1;        background-color: transparent      }      &-ellipsis{        display: inline-block      }      &-txt {        font-size: inherit;      }    }  }</style>

阅读全文

0 0