문장 단축 알고리즘 문제

Question

길이가 제한되지 않은 여러 텍스트 항목을 표시하는 웹 페이지가 있습니다. 새로운 라인으로가는 것을 피하기에는 너무 길면 자동으로 절단됩니다. 이것은 그들 인하 PHP 함수입니다 :

아래 이미지에서 볼 수 있듯이

function cutSentence($sentence, $maxlen = 16) { 
    $result = trim(substr($sentence, 0, $maxlen)); 

    $resultarr = array(
      'result' => $result, 
      'islong' => (strlen($sentence) > $maxlen) ? true : false  
     ); 

    return $resultarr; 
} 

, 결과는 괜찮지 만, 몇 가지 예외가있다. 여러개의 M을 포함하는 문자열 (그것들을 고려해야한다)은 개행 문자로 갈 것이다.

지금 당장은 모든 문자가 이미 16 문자 밖에 안되며 이미 매우 낮아서 읽기가 어렵습니다.

더 많은 공백이 필요한 문장과 더 넓은 문자를 포함하는 문장이 더 적은 수의 문자로 잘릴 수 있는지 확인하고 싶습니다. (CSS 속성 텍스트를 사용하지 마십시오. -overflow : ellipsis는 널리 지원되지 않기 때문에 "..."을 클릭하여 전체 항목에 연결할 수 없으며 모든 비용이 필요합니다.)

미리 감사드립니다.

Answer 1

응용 프로그램의 스타일이 중요하지 않은 경우, Courier와 같은 모노 스페이스 패밀리의 글꼴을 사용하면됩니다.

Answer 2

모든 글자의 너비가 동일하도록 고정 너비 글꼴을 사용할 수 있습니다. 또는 선택적으로 모든 문자가 얼마나 많은 픽셀인지 확인하고 함께 추가하고 픽셀 길이가 일정한 양을 초과하지 않는 추가 문자를 제거하십시오.

Answer 3

PHP가 아닌 Javascript로 수행하십시오. DOM 속성 offsetWidth을 사용하여 포함 요소의 너비를 가져옵니다. 최대 너비를 초과하면 그에 따라 잘립니다. How can I mimic text-overflow: ellipsis in Firefox?에서 복사

코드 :

function addOverflowEllipsis(containerElement, maxWidth) 
{ 
    var contents = containerElement.innerHTML; 
    var pixelWidth = containerElement.offsetWidth; 
    if(pixelWidth > maxWidth) 
    { 
     contents = contents + "…"; // ellipsis character, not "..." but "…" 
    } 
    while(pixelWidth > maxWidth) 
    { 
     contents = contents.substring(0,(contents.length - 2)) + "…"; 
     containerElement.innerHTML = contents; 
     pixelWidth = containerElement.offsetWidth; 
    } 
} 

Answer 4

당신은 당신이 그렇게 할 CSS 텍스트 오버 플로우를 사용할 수있는 웹 페이지를 요청하고 있기 때문에. 이 충분히 지원 될 것, 그리고 파이어 폭스에 대한 css workarounds 또는 jquery workarounds ...이 같은

뭔가있을 것 같습니다 : 그것은 맞는 것보다 더 많은 텍스트를 입력하면

span.ellipsis { 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    width:100%; 
    display:block; 
} 

는 세 개의 점을 추가 할 것 결국. HTML 공간을 낭비하지 않도록 텍스트가 너무 길면 텍스트를 자릅니다. 여기

더 많은 정보 : 끝에서 '더보기'링크를 추가

https://developer.mozilla.org/En/CSS/Text-overflow

는 고정 폭이 다른 범위를 추가하면 더 볼 수있는 링크를 포함하는 것으로, 충분히 쉽다. 텍스트는 그 앞에 줄임표로 잘립니다.