너비와 높이가 고정된 여러 줄의 요소에 잘림을 표시하기 위해 타원(...)을 어떻게 추가할 수 있습니까?-JS 튜토리얼-php.cn

너비와 높이가 고정된 여러 줄의 요소에 잘림을 표시하기 위해 타원(...)을 어떻게 추가할 수 있습니까?

DDD

풀어 주다： 2024-10-27 08:23:30

원래의

454명이 탐색했습니다.

How can we append ellipses (...) to indicate truncation on a multi-line `` element with a fixed width and height?

고정 너비, 여러 줄 텍스트 오버플로에 대한 줄임표 처리

웹 개발 영역에서는 지정된 컨테이너 내 텍스트 오버플로를 우아하게 처리해야 할 필요성이 발생합니다. 너비와 높이. 여러 줄의

에서 잘림을 나타내기 위해 줄임표(...)를 어떻게 추가할 수 있습니까? 요소?

가능한 해결 방법:

jQuery는 다음 마크업과 CSS를 사용하여 솔루션을 제공합니다.

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

로그인 후 복사

<code class="css">#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}
#fos p {
  padding: 10px;
  margin: 0;
}</code>

로그인 후 복사

jQuery 코드가 반복적으로 발생합니다. 원하는 높이에 도달할 때까지 텍스트의 마지막 단어를 자릅니다.

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}</code>

로그인 후 복사

고려 사항:

이 기술은 다음과 같은 경우에도 시각적으로 올바른 결과를 보장합니다. JavaScript가 비활성화되었습니다.
서버측 잘림은 성능을 향상시킬 수 있습니다.
이것은 불완전한 솔루션이며 실제 구현을 위해서는 추가 개선이 필요합니다.

데모 :

jsFiddle에서 라이브 데모를 볼 수 있습니다: https://jsfiddle.net/5638d9y0/

추가 리소스:

[CSS 유연한 상자 튜토리얼](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[Flexbox 소개](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
[Flexbox 전체 안내서](https://www.w3schools.com/css/css3_flexbox.asp)

위 내용은 너비와 높이가 고정된 여러 줄의 요소에 잘림을 표시하기 위해 타원(...)을 어떻게 추가할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!