렌더링된 픽셀 너비를 위한 데이터에서 각 문자는 브라우저의 글꼴

Question

나는 테이블의 칼럼을 제한할 필요가 일정 폭-말 100 개의 픽셀이 있습니다.시간 텍스트에서는 열보다 많은 이 공간을 포함하지 않음.예를 들어:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

고 싶을 계산하는 폭의 텍스트를 서버측에 추가임 후의 올바른 번호로 문자입니다.문제는 없어요 데이터에 대한 렌더링됩니다.

예를 들어,가정하면 브라우저 Firefox3 글꼴 12px Arial.어떤 것의 폭 letter"a",폭 편지의"b",etc.?

당신은 당신을 보여주는 데이터를 픽셀 너비의 각 문자는?또는 프로그램을 생성해야 하는가?

나는 생각한 영리 하나간 자바 스크립트 할 수 있습니다.그러나 나는 원하지 않는 시간을 보내고 다시 발명의 바퀴는 경우 다른 사람이 이미 이 프로젝트를 진행했습니다.나는 확실히지 않는 첫 번째 사람에 대하여 이 문제를 해결합니다.

Answer 1

이 뿐만 아니라 불가능을 server-side,그것은 또한하지 않습니다.당신이하지 않는 어떤 브라우저 클라이언트 사용하는 것,그리고 당신은 무엇인지 모르 글꼴 설정에서 클라이언트 측의 재정의 어떤 스타일링 정보를 할당하는 HTML.당신이 생각하는 당신을 사용하여 절대적인 위치에 있는 픽셀의 스타일의 속성,하지만 클라이언트 간단하게 수 있 자들을 무시하고 또는 일부를 사용하여 플러그인을 확대한 것이므로 클라이언트가 사용하는 고 dpi 화면입니다.

를 사용하여 고정 폭은 일반적으로 잘못된 생각이다.

Answer 2

는 방법에 대해 오버플로우:스크롤?

Answer 3

Ext JS 는 모듈을 그냥 그렇게

TextMetrics 제공하는 정확한 픽셀 측정 블록에 대한 텍스트할 수 있도록 을 정확하게 결정할 고 고 고 고 고 고 고 고 고 고양, 픽셀,블록 텍스트 니다.

나는 확신이 있다는 것 다른 라이브러리를 사용할 수 있습니다 거기에는 그것을 할뿐만 아니라.

Answer 4

매우 어렵 server-side.할 수 있는지 알 글꼴을 사용자가 설치되어 있고 거기에 많은 영향을 주는 것을의 디스플레이 텍스트입니다.

이 시도하는 대신:

table-layout: fixed;

는지 확인하는 테이블은 결코 크기보다 큰 당신이 지정됩니다.

Answer 5

여기에는 나의 클라이언트 측의 솔루션을 내놓았다.그것은 아주 특정을 내 응용 프로그램이지만 나는 그것을 공유하는 경우 여기서 다른 사람에 걸쳐 제공됩 동일한 문제입니다.

그것은 작품은 좀 더 빠르게 보다 나는 예상된다.고서의 내용을 세포는 텍스트만 어떤 HTML 포맷 삭제됩니다에 단축하는 과정입니다.

그것은 필요 jQuery.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 6

이것은 본질적으로 불가능을 서버 사이드에서 작동합니다.이외에 사람들의 문제는 다른 글꼴이 설치되어 있어,당신은 또한 커닝(문자"f"을 다른 공간의 크기에 따라 다)및 글꼴 옵션 렌더링(은 클리어까?"큰 글꼴"?).

Answer 7

거기에 아무것도 할 수 있습 server-side 를 계산합니다.당신이 모든 작업은 브라우저는 식별 문자열을 수도 있습니다 또는 당신을 말하지 않는 사용자의 운영 체제고 브라우저는 정확하게됩니다.할 수도 있습니다"물"(를 통해 글꼴 꼬리표 또는 CSS)에 대한 특정한 글꼴을 사용할 텍스트를 표시하지 보장할 수는 없습니다 사용자가 해당 글꼴을 설치됩니다.을 넘어 사용자가 다를 수도 있습니다 DPI 설정을 운영 체제 수준에서,또는 수로 만든 텍스트 크거나 작 브라우저 줌 기능,또는이 될 수 있을 사용하여 자신의 스타일 시트니다.

Answer 8

할 수 있습을 넣어 텍스트로 보이지 않는 기간을 참조하시기 바랍에 걸쳐 폭하지만,기본적 이처럼 보이려는 사람을 방해하는 사이트,그리고 그러므로 내가 추천하는 것을 금지하는 게시물을 가진 이상 단어는 특정 lenth,예를 들어 30 없이 문자 공간(수 있도록 링크를 할 수 있다.-)

하지만,간단한 접근 방식은 블록 요소의 내부 테이블 셀:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

이 것이 효과적으로 정지 테이블 어지럽히지!o]

Answer 9

만약 당신이와 확인에 대한 작동하지 FireFox,왜 그냥 사용 CSS?는 테이블과 테이블 레이아웃을 미칠 수 있는 열 질문이 있 overflow:hidden;text-overflow:임;white-space:nowrap.

Answer 10

http://www.css3.info/preview/text-overflow/

이것은 새로운 기능의 css3.

Answer 11

일부 사용자가 크거나 작은 기본 글꼴을 설정합니다.당신은 할 수 없이 서버에 있습니다.할 수 있습만 그것을 측정하면 브라우저에 렌더링됩니다.

Answer 12

이 글꼴 크기 쉽게 변경할 수 있습 브라우저에면,서버측 계산이 잘못되었는 매우 쉽습니다.

빠른 클라이언트 측정하는 것이 스타일 세포의 오버플로 속성:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

더 나은 대안입을 자신의 문자열과 서버 쪽을 제공한 간단한 자바 스크립트 도구 설명을 표시할 수 있는 더 이상 버전입니다.는"확대"버튼을 수 있습니다 또한 도움을 표시 할 수있는 결과에서는 오버레이 div.

Answer 13

당신이 원하는 것은 <wbr> 태그가 있습니다.이는 특별 HTML 태그를 알려주는 브라우저는 가능하단 말씀이 여기는 경우는 포장이 필요합니다.나지 않을 것입으로 텍스트를 위한 영구 저장소기 때문에 당신은 카플링으로 데이터디/할 것입니다 어떻게 표시하는 데이터입니다.그러나,그것은 완벽하게 허용하기를 주입하는 태그는 서버 측에서는 코드 보기 중심의(와 같은 JSP 꼬리표 또는 컨트롤러에서).그게 내가 그것을 할 것입니다.그냥 사용하는 일부 정규 표현식을 찾는 단어보다 더 X 문자를 주입하이 태그는 모든 문자는 이러한 단어입니다.

업데이트:을 보는 것 같 wbr 지원하지 않는 모든 브라우저입니다.특히,IE8.I 테스트하지 않은 자신이 비록.아마도 사용할 수 있습 overflow:hidden 로 백업을 의미합니다.