CSS는 한 줄 및 여러 줄 텍스트 생략(잘림)을 구현합니다.

이 글에서는 잊어버릴 경우를 대비해 이 효과의 구현(한 줄 텍스트 오버플로 생략 포함)을 간략하게 기록합니다. 구체적으로는 이러한 텍스트 배열 효과를 얻기 위한 것입니다.

html 코드는 다음과 같습니다.

<div class="container">
  <div class="box">
    <div class="box-content">
      <h5 class="box-content-title">A公司</h5>
      <div class="box-content-desc singleline">A公司是B公司的重要战略伙伴，致力于为C行业提供一站式 解决方案，目前处于高速发展期。公司旗下有四个事业部，业务主要涵盖以下三个方面，2016年公司 年营业额达到100万元。
      </div>
      <div class="box-content-desc multiline">A公司是B公司的重要战略伙伴，致力于为C行业提供一站式 解决方案，目前处于高速发展期。公司旗下有四个事业部，业务主要涵盖以下三个方面，2016年公司 年营业额达到100万元。
      </div>
      <a class="box-content-link" href="javascript:void(0);">查看 >></a>
    </div>
  </div>
</div>

일반적인 CSS 스타일은 다음과 같습니다.

.container {
  margin: 50px auto;
  width: 328px;
}

.box {
  background: #f7f7f7;
}

.box-content {
  padding: 20px;
}

.box-content-title {
  margin: 0 0 20px;
}

.box-content-desc {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  overflow: hidden;
}

.box-content-link {
  color: #006ec8;
  font-size: 14px;
  text-decoration: none;
}

참고 위의 오버플로: 숨겨야 합니다.

한 줄 텍스트 오버플로 생략:

1한 줄{

2 텍스트 오버플로: 줄임표;

3 공백: nowrap;

4}

text-overflow 속성은 오버플로 텍스트 콘텐츠를 표시하는 방법을 지정합니다. 해당 속성 값은 elipsis(...), 클립(잘림) 또는 사용자 정의 문자열일 수 있습니다. Chrome에서 사용해 본 결과 맞춤 문자열을 사용하기가 쉽지 않다는 것을 알았습니다.

여러 줄 텍스트 오버플로 생략 보기:

.multiline {
  display: -webkit-box;
  text-overflow: ellipsis;;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

여기서는 비표준 CSS 작성, 즉 웹킷 접두사(웹킷 커널 브라우저 개인 속성)를 사용하여 작성하는 것을 볼 수 있습니다. ) ), 그리고 일부 오래된 쓰기 방법이 사용됩니다.

display: -webkit-box;
-webkit-box-orient: 수직;
-webkit-line-clamp: 4;

여기서는 별로 설명하지 않겠습니다(사실 설명이 이해가 안가네요), 여러줄을 생략하는 방법은 별로 좋지 않습니다. 앞으로는 다른 더 좋은 방법을 연구해 보도록 하겠습니다.