vue 모 바 일 엔 드 프로젝트 의 다 중 줄 텍스트 넘 침 생략 실현

6585 단어 vue이동 단텍스트넘쳐흐르다생략한다
다 중 텍스트 넘 침 생략
위 챗 공식 번호 개발 을 할 때 필요 한 것 이 있 습 니 다.

방법 을 찾 았 는데,

<div>
	2323       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。
</div>
<!--          -->
<!-- 
	         
	1,   p   (          ,   ),
	2,        /* autoprefixer: off */   /* autoprefixer: on */
		        ,         
-->
<div>
	<p>2323       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。       ，        ，      title  。</p>
</div>


 p{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  /* autoprefixer: off */ 
  -webkit-box-orient:vertical; 
  /* autoprefixer: on */ 
  -webkit-line-clamp:2; 
 }
보충 지식:vue 에서 문자 2 줄 초과...전개-접 기(호 환 ie)
1.실제 효 과 를 먼저 본다.

2.한 걸음 한 걸음 분석 이 필요 하 다
텍스트 가 생략 번 호 를 초과 하면 css 스타일 이 실 현 될 것 을 생각 합 니 다(ie 호 환 되 지 않 음)

  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
3.자신 도 게 으 른 사람 이기 때문에 인터넷 에서 찾 아 보고 싶 습 니 다.몇 편의 글 을 보 았 는데 모두 width,height 에 따라 계산 한 것 입 니 다.복잡 하 게 쓴 것 을 보 았 습 니 다.모두 한 텍스트 만 을 대상 으로 한 것 입 니 다.현실 에 서 는 보통 리스트 에 데 이 터 를 보 여 주 는 것 입 니 다.
코드 는 다음 과 같 습 니 다:실행 가능,호 환 ie

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vue      2         -  </title>
 <style>
 .content {
  display: flex;
  margin-bottom: 30px;
 }

 .text {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
 }

 .retract {
  position: relative;
  overflow: hidden;
 }

 .retract:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 25px;
  padding-left: 30px;
  background: linear-gradient(to right, transparent, #fff 45%);
 }

 .btn {
  position: absolute;
  right: 0;
  bottom: -30px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 2px;
  color: #FFAD41;
  cursor: pointer;
 }

 .more {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  color: #666666;
  visibility: hidden;
 }
 </style>
</head>

<body>
 <div id="app">
 <div class="view">
  <div class="text more" ref="more">
    
  </div>
  <div class="content" v-for="(item, index) in curData" :key="index">
  <div class="text">
   <div :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" ref="textContainer">
   {{item.desc}}
   </div>
   <div class="btn">
   <p v-if="item.status" @click="item.status = false">  </p>
   <p v-if="item.status == false" @click="item.status = true">  </p>
   </div>
  </div>
  </div>
 </div>
 </div>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
 new Vue({
 el: '#app',
 data() {
  return {
  curData: [
   { desc: '  、  、         。        、  、  、     ，      、  。             。               、  、       （   ）。            、  、  、  、  、  、  、    、     。            、     、     、     。                  。' },
   { desc: '         ：    、    、    、    、    ，  ，         。' },
   { desc: '         ，       ，                 ，             ，                  。          、       。' },
   { desc: '              。“       。”(     《  》    )     “ ”。    ，                   、    、    、        、       ，                  。                    。       ，     ，                             。' }
  ],
  textHeight: null
  }
 },
 mounted() {
  this.curData.forEach((ele, index) => {
  this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  // DOM      
  this.$nextTick(() => {
  this.calculateText()
  })

  window.onresize = () => {
  this.curData.forEach((ele, index) => {
   this.$set(this.curData, index, Object.assign({}, ele, { status: null }))
  })
  setTimeout(() => {
   this.calculateText()
  }, 0)
  }
 },
 methods: {
  //             
  calculateText() {
  //        height             
  let oneHeight = this.$refs.more.scrollHeight
  let twoHeight = oneHeight * 2 || 40
  this.textHeight = `${twoHeight}px`
  let txtDom = this.$refs.textContainer
  for (let i = 0; i < txtDom.length; i++) {
   let curHeight = txtDom[i].offsetHeight
   if (curHeight > twoHeight) {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true }))
   } else {
   this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null }))
   }
  }
  }
 }
 })
</script>
4.분석 코드
생략 번호 통과:after 위조 클래스 실현
텍스트 의 한 줄 높이,브 라 우 저 에서 보 여 주 는 것 과 차이 가 있 기 때문에 여기 서 나 는 페이지 에 자리 잡 는 텍스트 를 배치 하여 숨겨 진 자 리 를 설정 했다.
차지 하 는 텍스트 의 높이*2 를 가 져 와 2 줄 텍스트 내용 의 동적 변화 status 상태 null-전개 없 음 접 기 true-전개 false-접 기 결합 max-height 실현

5.마무리(잘 모 르 겠 습 니 다.질문 을 주 고 받 으 세 요.감사합니다.)
이상 의 vue 가 모 바 일 엔 드 프로젝트 의 여러 줄 텍스트 넘 침 을 실현 하 는 것 은 생략 입 니 다.바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 할 수 있 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
IOS 개발-다 중 스 레 드 큐 테스트 코드
IOS 에서 캐 시 파일 의 크기 를 계산 하 는 인 스 턴 스 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage