0
글자 수에 따라 단락의 너비를 설정하고 싶습니다. 그 때문에 나는 ch
단위를 사용하고 있습니다. 문제는 폰트 패밀리를 변경할 때입니다. 왜냐하면 ch
유닛이 모노 스페이스베이스를 사용했기 때문입니다.글자의 너비를 기본으로 설정하는 방법
에 관계없이 폰트 패밀리 (모든에서 작동)의을 문자베이스 폭 을 설정합니다 (단 CSS/HTML로) 방법이 있나요?
글자 수에 따라 단락의 너비를 설정하고 싶습니다. 그 때문에 나는 ch
단위를 사용하고 있습니다. 문제는 폰트 패밀리를 변경할 때입니다. 왜냐하면 ch
유닛이 모노 스페이스베이스를 사용했기 때문입니다.글자의 너비를 기본으로 설정하는 방법
에 관계없이 폰트 패밀리 (모든에서 작동)의을 문자베이스 폭 을 설정합니다 (단 CSS/HTML로) 방법이 있나요?
하지 만,
당신은 자바 스크립트를 사용하여 같은 일을 할 수 있지만, 매우 편리 아니다. 여기데모 :https://jsbin.com/fecevopara/1/edit?html,css,js,console,output
봅니다 방법 폭의 변화를보기 위해 HTML의 텍스트를 변경합니다.
const container = document.getElementById('container')
const textLength = container.innerText.length
if (textLength > 10) {
container.style.width = '50px'
}
if (textLength > 20) {
container.style.width = '100px'
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="container" style="display: inline-block; width: 10px; background: #ccc">
Some text goes hereeeee
</div>
</body>
</html>
자바 스크립트 코드 (단지 예를 생각하지 생산 준비가 전혀) :
const container = document.getElementById('container')
const textLength = container.innerText.length
if (textLength > 10) {
container.style.width = '50px'
}
if (textLength > 20) {
container.style.width = '100px'
}
및 HTML은 다음과 같습니다
<div id="container" style="display: inline-block; width: 10px; background: #ccc">
Some text goes hereee
</div>
기본적으로
는 것 동적으로 포함 된 너비 스타일 속성 변경 r 내부의 문자 수에 따라 다름.
다른 글꼴의 글꼴 너비에 따라 문자가 다르기 때문에 아니요. 예를 들어, 다음은 SO 기본 글꼴을 사용하는 8 개의 i 문자입니다. iiiiiii 여기에 monospace 글꼴 인'iiiiiiii'가 있습니다. 둘 다'font-size : 13px'입니다. – Narxx
알아요. 그래서, 내가 그 질문을 자제하게한다. CSS가 특정 문자의 실제 문자 수를 계산할 수있는 방법이 있습니까? – Emily
두 가지 이유 때문에 요소의 너비를 기준으로 요소 너비를 설정할 수 없습니다. 첫째, 다른 문자는 렌더링 된 폭이 다릅니다. 두 번째 : CSS는 다른 방향으로 작동합니다. 자식 요소는 부모를 기반으로 설정할 수 있으며 자식을 기반으로하는 부모는 설정할 수 없습니다. – Narxx