* 문자 *로 너비 지정

108

고정 너비 글꼴을 사용할 때 HTML 요소의 너비를 문자 로 지정하고 싶습니다 .

"em"단위는 M 문자의 너비 여야하므로 너비를 지정하는 데 사용할 수 있어야합니다. 다음은 예입니다.

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

결과는 10이 아닌 15 열 이후에 브라우저 줄이 끊어 지므로 원하는 결과가 아닙니다.

1 3 5 7 9 1 3 5
7 9 1

(결과는 모두 Ubuntu에서 Firefox 및 Chromium입니다.)

Wikipedia의 기사에 따르면 "em"이 항상 M의 너비는 아니므로 "em"단위를 신뢰할 수없는 것처럼 보입니다.

css font-size

— 마틴 빌 칸스
소스

나는 "en"도 합법적 인 너비라고 믿습니다. 타이포그래피에서 숫자의 너비입니다. 즉 수도 당신을 위해 잘 작동합니다.

— Pete Wilson

'em'속성은 글자의 너비가 아닌 글꼴의 글꼴 크기 또는 높이를 사용합니다 . @Pete : 그렇지 않습니다. CSS 값 및 단위 모듈 레벨 3을 참조하십시오 .

— animuson

고정 너비 글꼴을 사용하지 않는 한 문자마다 너비가 다릅니다. 따라서 표시되는 문자 수로 너비를 설정하는 것은 기능적으로 불가능합니다.

— Emily

고정 폭 글꼴에서 일정한 수의 문자에 맞게 <div>의 너비를 설정하는 방법의

— Martin Vilcans

"이 질문을 닫으려면 여전히 다른 사용자의 4 표가 필요합니다."-제 질문입니다! 닫을 게요!

— Martin Vilcans

답변:

1em은 너비가 아니라 M의 높이입니다. x의 높이 인 ex도 마찬가지입니다. 더 일반적으로 말하면 대문자와 소문자의 높이입니다.

너비는 완전히 다른 문제입니다 ....

위의 예를 다음으로 변경하십시오.

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

스팬의 너비와 높이가 다릅니다. Chrome에서 글꼴 크기가 20px 인 경우 범위는 12x22px이며 여기서 20px는 글꼴 높이이고 2px는 줄 높이입니다.

이제 em과 ex는 여기에서 사용되지 않으므로 CSS 전용 솔루션의 가능한 전략은 다음과 같습니다.

& nbsp; 만 포함하는 요소 만들기
자동 크기 조정
div를 및
주변 요소의 10 배로 만듭니다.

그러나 나는 이것을 코딩하지 못했습니다. 나는 또한 그것이 정말로 가능한지 의심합니다.

그러나 동일한 논리를 Javascript로 구현할 수 있습니다. 여기에서 유비쿼터스 jQuery를 사용하고 있습니다.

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

+1 in (w * 10 + 1)은 반올림 문제를 처리하는 것입니다.

— 게르드 리셀 만
소스

나는 문자의 높이와 너비 사이의 비율을 아는 경우에만 가능한 순수한 CSS 솔루션을 원했습니다 ( stackoverflow.com/questions/1255281/… 참조 ). 강력한 솔루션 인 것처럼 보이므로 이것을 대답으로 받아들이고 있습니다.

— Martin Vilcans 2011

여기서 답변에 따르면 1em은 M의 높이가 아닙니다. graphicdesign.stackexchange.com/questions/4035/… "|" 문자는 1em에 가까워 야합니다.

— Sogartar

설명을 위해 Sogartar : 타이포그래피에서 적절한 1 em은 실제로 고정 너비 문자의 너비 (및 em 높이)입니다. 그러나 그것은 "적절한 타이포그래피"이고 우리는 타이포그래피 규칙을 따르지 않는 폰트 파일을 만드는 많은 사람들이 밤을 지새우고 있습니다. 특히 웹 폰트의 경우에 그렇습니다. 여기서 내 의견의 요점은 (단순히) 웅장한 의미가 아닙니다. 내 요점은 테스트, 테스트, 테스트입니다. (그리고 좀 더 테스트합니다.)

— Parapluie

217

`ch` 단위

당신이 찾고있는 단위는 ch입니다. MDN 문서 에 따르면 :

ch: 요소의에서 글리프 "0"(영, 유니 코드 문자 U + 0030)의 너비 또는보다 정확하게는 진보 측정 값을 나타 font냅니다.

현재 버전의 주요 브라우저 ( caniuse ) 에서 지원됩니다 .

예

pre {
    width: 80ch; /* classic terminal width for code sections */
}

— 트랜지스터 09
소스

또한 Wikipedia의 공백 (구두점) 기사에 설명 된대로 정확하게 "한 자리의 너비와 동일" 인 그림 공간 도 있습니다 . 그것은의 유니 코드 값은 U + 2007이며 HTML에서 입력 할 수 있습니다 또는 . 기능적 으로 CSS 단위 와 동일 하지만 널리 지원되지는 않지만 HTML에서 해결 방법으로 사용할 수 있습니다 (추악한 해킹이지만 작동해야 함).   ch

— waldyrious

실제로이 크롬 문제에 따르면 크롬은 v27부터 지원하므로 현재 모든 주요 브라우저 (IE, 크롬 및 파이어 폭스)의 최신 버전은 ch 단위를 지원합니다. :)

— waldyrious

문자 크기는 요소의 글꼴에있는 글리프 '0'의 크기입니다. 'm'또는 'w'와 같은 더 큰 문자가 예상되는 경우 적절하게 확장하거나 필요에 따라 확장하는 것을 고려할 수 있습니다 (예 : stackoverflow.com/questions/7168727/… )

— user420667

네, 고정 폭 글꼴에는 문제가 없습니다.

— Willege

IE11은 잘못된 것을 지원합니다. stackoverflow.com/questions/17825638/…

— aleha