* 문자 *로 너비 지정
고정 너비 글꼴을 사용할 때 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)은 반올림 문제를 처리하는 것입니다.
ch 단위
당신이 찾고있는 단위는 ch입니다. MDN 문서 에 따르면 :
ch: Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element'sfont.
It is supported in current versions of major browsers (caniuse).
Example
pre {
width: 80ch; /* classic terminal width for code sections */
}
Why not use a dynamic width for your div and use php to insert a break after your desired amount of characters? Would be something like this.
<?php
$linelength = (chars per line);
$data = "1 3 5 7 9 1 3 5 7 9 1";
$lines = strlen($data) / $linelength;
$count = 0;
while($count < $lines) {
echo substr($data, $count*$linelength, $linelength)."<br />";
}
if((strleng($data) % $linelength) > 1) {
echo substr($data, $lines*$linelength)."<br />";
}
?>
참고URL : https://stackoverflow.com/questions/8186457/specify-width-in-characters
'Programming' 카테고리의 다른 글
| Windows에서 MySQL과 Python 통합 (0) | 2020.08.17 |
|---|---|
| 자바 : CPU 코어에 따라 스레드를 확장하는 방법은 무엇입니까? (0) | 2020.08.17 |
| Spring RestTemplate 시간 초과 (0) | 2020.08.15 |
| SOAP 메시지와 WSDL의 차이점은 무엇입니까? (0) | 2020.08.15 |
| 프로덕션에서 Rails 콘솔 실행 (0) | 2020.08.15 |