고정 너비 Div에서 줄임표를 사용하여 여러 줄 텍스트 오버플로를 만드는 방법은 무엇입니까?

고정 너비 및 높이에 줄임표가 추가된 브라우저 간 여러 줄 텍스트 오버플로

문제:

어떻게 <div>에 줄임표를 만들 수 있나요? 고정된 너비와 여러 줄을 사용하여 넘친 텍스트가 잘리도록 하시겠습니까?

해결책:

이를 달성하려면 jQuery 스니펫을 활용하여 원하는 내용에 맞을 때까지 텍스트의 마지막 단어 height.

구현:

1. <div> 너비와 높이가 고정되어 있고 텍스트를 포함할 단락(

   )이 있습니다.

2. CSS를 추가하여 오버플로를 숨김으로 설정하여 잘림 부분이 보이지 않도록 합니다.

3. 잘림을 수행하는 jQuery 함수를 만듭니다. 이 기능은 다음을 수행합니다.

   • 요소를 $p 변수에 저장합니다.

   • <div> divh 변수에 저장합니다.
   • While 루프를 사용하여 원하는 높이에 맞을 때까지 텍스트의 마지막 단어를 제거합니다. 루프는 text() 함수를 사용하여

     업데이트되고 잘린 텍스트를 사용합니다.

추가 고려 사항:

1. 이 접근 방식에는 잘림을 위한 JavaScript가 포함됩니다. 성능을 향상하려면 서버측 잘림과 결합하는 것을 고려해 보세요.

2. CSS가 전체 너비를 차지하도록 보장합니다. <div>.

예:

HTML

<div>

CSS

#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}

#fos p {
  width: 100%;
  padding: 10px;
  margin: 0;
}

jQuery

var $p = $('#fos p');
var divh = $('#fos').height();

while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

데모: https://jsfiddle.net/w0n5cy2j/

위 내용은 고정 너비 Div에서 줄임표를 사용하여 여러 줄 텍스트 오버플로를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!