2017-11-09 11 views
0

글자 수에 따라 단락의 너비를 설정하고 싶습니다. 그 때문에 나는 ch 단위를 사용하고 있습니다. 문제는 폰트 패밀리를 변경할 때입니다. 왜냐하면 ch 유닛이 모노 스페이스베이스를 사용했기 때문입니다.글자의 너비를 기본으로 설정하는 방법

에 관계없이 폰트 패밀리 (모든에서 작동)의을 문자베이스 폭 을 설정합니다 (단 CSS/HTML로) 방법이 있나요?

+0

다른 글꼴의 글꼴 너비에 따라 문자가 다르기 때문에 아니요. 예를 들어, 다음은 SO 기본 글꼴을 사용하는 8 개의 i 문자입니다. iiiiiii 여기에 monospace 글꼴 인'iiiiiiii'가 있습니다. 둘 다'font-size : 13px'입니다. – Narxx

+0

알아요. 그래서, 내가 그 질문을 자제하게한다. CSS가 특정 문자의 실제 문자 수를 계산할 수있는 방법이 있습니까? – Emily

+1

두 가지 이유 때문에 요소의 너비를 기준으로 요소 너비를 설정할 수 없습니다. 첫째, 다른 문자는 렌더링 된 폭이 다릅니다. 두 번째 : CSS는 다른 방향으로 작동합니다. 자식 요소는 부모를 기반으로 설정할 수 있으며 자식을 기반으로하는 부모는 설정할 수 없습니다. – Narxx

답변

0
CSS 솔루션 확실

하지 만,

당신은 자바 스크립트를 사용하여 같은 일을 할 수 있지만, 매우 편리 아니다. 여기

데모 :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 내부의 문자 수에 따라 다름.

관련 문제