고정 너비 글꼴을 사용할 때 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”단위를 신뢰할 수없는 것처럼 보입니다.
답변
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> </span></div>');
var w = $('#testwidth span').width();
$('#testwidth').remove();
$('div').css('width', (w * 10 + 1) + 'px');
</script>
</body>
</html> +1 in (w * 10 + 1)은 반올림 문제를 처리하는 것입니다.
