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

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

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

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

가능한 해결 방법:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript jquery css for append this overflow https word

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.