Многострочное отображение переполнения с многоточием и реализация щелчка для расширения (css/js)!

JavaScript

Что касается вопроса отображения многоточия при многострочном переполнении, то если часть заменить многоточием в соответствии с лимитом длины символов, превышающим лимит, то с этим все равно очень легко справиться. беспорядочные решения в Интернете, но их нельзя использовать напрямую Я реорганизую и изменю волну нескольких решений, которые можно использовать напрямую на основе идей в Интернете.

1. Появляется однострочное переполнение с многоточием:

<div class="p">张艺兴张艺兴张艺兴张艺兴张艺兴</div>
样式：
.p{
 width:1rem;
 overflow:hidden;//超出部分隐藏
 white-space:nowrap;//禁止换行
 text-overflow:ellipsis//省略号
}

картина:在这里插入图片描述

Во-вторых, при многострочном переполнении появляется многоточие (css-схема):

Это решение простое и понятное, но есть совместимость, она применима только к браузерам webkit или мобильным терминалам.

<div  class="p">小绵羊小绵羊小绵羊小绵羊小绵羊小绵羊</div>
样式：
.p{
  width:1rem;
  height:0.4rem;//需要设置高度
  //必须结合的属性，将对象作为弹性伸缩盒对象的子元素的排列仿古式
  display:-webkit-box;
  -webkit-box-orient:vertical;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;//例如超过2行显示省略号
  overflow:hidden;
}

Примечание: Это решение с css имеет проблемы с совместимостью. Вот небольшой ярлык. Если у вас есть проблемы с совместимостью с css, вы можете попробовать написать стиль в строке, что может решить проблему совместимости. (Никаких абсолютов, просто опыт... ха-ха) Итак, есть ли идеальное решение и есть ли совместимое решение? Мощный js может это решить, но это немного сложно, зато безопаснее. . . .

3. Многоточие появляется при многострочном переполнении (схема js):

<template>
<div class="box">
 <textarea  id=""  rows="10" v-model="val"></textarea>
  <div id="boxid" class="text" v-text="val" ></div>
  <button @click="btn">按钮</button>
 </div>
</template>
<script>
  export default {
    data(){
      return {val:""}
    },
    methods:{
    btn(){
      //参数1 元素id  参数2 要限制的行数 参数3 输入的值
      this.moreline('boxid',3,this.val)//传3表示超过3行时省略号显示。
    },
    moreline(id,rows,str){
      var boxid = document.getElementById(id);
      var computedStyle = document.defaultView.getComputedStyle(boxid,null);
      var lineHeight = computedStyle.lineHeight;
      var top = rows*parseInt(lineHeight);
      var tempstr = str;
      boxid.innerHTML = tempstr;
      var len = tempstr.length;
      var i = 0;
      if(boxid.offsetHeight<=top){
      }else{
        var temp = "";
        boxid.innerHTML = temp;
        while(boxid.offsetHeight<=top){
          temp = tempstr.substring(0,i+1);
          i++;
          boxid.innerHTML = temp;
        }
        var slen = temp.length;
        tempstr = temp.substring(0,slen-1);
        len = tempstr.length;
        boxid.innerHTML = tempstr.substring(0,len-1)+"...";
        boxid.height = top+"rem";
      }
     }
    }
  }
</script>

График результатов:在这里插入图片描述

Использование js для реализации не просто для понимания. В настоящее время это самый надежный метод. Метод хорошо инкапсулирован и гибко используется. Вы можете передавать параметры в соответствии с вашими потребностями в соответствии с вашими потребностями.

Добавлен клик, чтобы развернуть функцию и код:

moreline(id,rows,str){
  var boxid = document.getElementById(id);
  var computedStyle = document.defaultView.getComputedStyle(boxid,null);
  var lineHeight = computedStyle.lineHeight;
  var top = (rows+1)*parseInt(lineHeight);
  var tempstr = str;
  boxid.innerHTML = tempstr;
  var len = tempstr.length;
  var i = 0;
  if(boxid.offsetHeight>top){
    var temp = "";
    boxid.innerHTML = temp;
    while(boxid.offsetHeight<=top){
      temp = tempstr.substring(0,i+1);
      i++;
      boxid.innerHTML = temp;
    }
    tempstr = temp.substring(0,temp.length-1);
    len = tempstr.length;
    boxid.innerHTML = tempstr.substring(0,len-3)+"..."+`<span class="a">展开</span>`;
    boxid.height = top+"rem";
    let en = document.querySelector(".a")
    en.onclick = function(){
        boxid.innerHTML = str;
    }
  }
 }

Изображение эффекта:

Нажмите, чтобы развернуть:

Автор: Маленькая фея, которая была в дороге Связь:Наггетс.Талант/пост/692135…Источник: Самородки Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.

Категории