픽셀 너비를 기준으로 문자열을 자릅니다.

Question

줄 바꿈없이 지정된 영역 (td)에 맞는 문자열을 만들려고합니다. 문제는 : 그것은 필요 ...

• 맞춤 해상도의 N가지에
• 맞게 크기를 조정
• 는
• 을 필요로 할 때 마지막에 ... 추가 (필요하지 않을 때 안) 동안 font-size, font-weight의 변화를 그대로 사용하고 font-family

---

CSS

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 

jQuery를 (// 그냥 라인을 깰 몇 가지 스타일을 추가)(// 찾기 : 14,Novon's question에 대한 답변을 바탕으로, 다음 코드를했다 모든 요소는 .truncated 요소를 포함합니다. td의 실제 너비 가져 오기 (내용을 제거하고 다시 추가 함).

하지만해야합니다 : 적용, (위의 코드에서 예상대로) td)

jQuery('.truncated').closest('td').each(function() { 
    var text = jQuery(this).text(); 
    var widthOriginal = jQuery(this).width(); 
    var widthEmpty = jQuery(this).text('').width(); 
    jQuery(this).text(text); 
    if(widthOriginal >= widthEmpty){ 
     var width = (parseInt(widthEmpty) - 10) + 'px'; 
     jQuery(this).css('maxWidth', width); 
     jQuery(this).text(text + '...'); 
    } 
}); 

결과에, minWidth를 필요로하는 경우는

---

나는 어쩌면 문자열의 첫 번째 line을 찾고 나머지를 제거하려고 시도했지만 그 방법을 찾지 못했습니다 (내 취향에 대해서는 "해결 방법"이 많습니다). 그렇게 할 수있는 더 좋은 방법이 있습니까?

line clampin

당신의 CSS에 사람들을 추가 :

.truncated { 
    display: -webkit-box; 
    -webkit-line-clamp: 1; // amount of line you want 
    -webkit-box-orient: vertical; 
} 

을 또는 당신은 클램프를 시도 할 수 있습니다 당신은 순수 CSS와 함께 할 수

Answer 1

은 참조를 위해이 링크를 참조하십시오.JS

https://github.com/josephschmitt/Clamp.js

Answer 2

랩 텍스트를 두 번이를 달성하기 위해 : 당신이 jQuery를 사용하기 때문에

<style type="text/css"> 

.relative_wrap { 
    height: 1em; 
    position: relative; 
} 

.absolute_wrap { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    top: 0px; 
    white-space: nowrap; 
} 

</style> 


<table> 
    <tbody> 
     <tr> 
      <td> 
       <div class="relative_wrap"> 
        <div class="absolute_wrap"> 
          LONG TEXT HERE 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

, 그것은 간단하다

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>'); 

Answer 3

당신은에 테이블 레이아웃을 설정하면 고정하고, td 오버플로가 hidden 인 경우,일 때 줄임표를 부동 소수점 앞에 붙이면 div이됩니다. 0의 스크롤 폭이 클라이언트 폭보다 큽니다.

table { 
    table-layout:fixed; 
    white-space:nowrap; 
    width:500px; 
    border-spacing: 0px; 
    border-collapse: separate;  
} 

td { 
    overflow:hidden; 
    border:1px solid #ddd; 
    padding:0px; 
} 

.hellip { 
    padding-left:0.2em; 
    float:right; 
    background:white; 
    position:relative; 
} 

jQuery를 :

$('td').each(function() { 
    if($(this)[0].scrollWidth > $(this).width()) { 
    $(this).prepend('<div class="hellip"">&hellip;</div>'); 
    } 
}); 

데모에서 : http://jsfiddle.net/5h798ojf/3/

Answer 4

text-overflow: ellipsis 

보인다 여기

테이블에 블리드을 통해 방지하기 위해 스타일을 포함하는 CSS,이다 순수 CSS 솔루션 http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 5

단일 라인 텍스트의 절단이 쉽게 버전 6

때문에 IE를 포함한 모든 주요 브라우저에서 지원하는 CSS text-overflow 속성을 사용하여 달성 할 수있는 것은 text-overflow 혼자 많은 일을하지 않는다는 것입니다. 텍스트가 컨테이너에 넘쳐 흐르면 에 대해서만 정의합니다. 따라서 결과를 보려면 텍스트를 한 줄로 강제로 오버플로해야합니다. 용기의 overflow 속성을 설정하는 것이 중요하다 :

.truncated { 
    display: block; 
    white-space: nowrap; /* forces text to single line */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

jsFiddle 예 : https://jsfiddle.net/x95a4913/

텍스트 오버 플로우 문서 :