만들기 웹 페이지의 모든 유니 코드 문자

내가 웹 페이지에서 동일한 폭을 갖는 다음 두 유니 코드 문자를 필요로 같은 폭 : ▼ (& # 9660)와 ▶ (& # 9654;)만들기 웹 페이지의 모든 유니 코드 문자

font-family: monospace;

Screenshot showing monospace problem

이 페이지에있는 모든 (그리고뿐만 아니라 일반적인 문자) 문자가 동일한 폭을 갖도록 할 수있는 방법이 있나요 :, 그들은 여전히 서로 다른 폭 (윈도우 8, 파이어 폭스 17)를 얻을 도움이되지 않습니다? 예제의

소스 코드 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    </head>7 
    <body> 
    <h1 style="font-family: monospace;"> 
     &#9660;test 
     <br> 
     &#9654;test 
    </h1> 
    </body> 
</html>

출처

2012-12-13 Andrej

는 다른 태그 문자를 모두 넣어 (같은 <span>)과 CSS를 사용하여 그것을 고정 폭을 제공합니다. (working example)이 같은 :

<span style="display: inline-block; width: 30px;">&#9660;</span>test 
<br> 
<span style="display: inline-block; width: 30px;">&#9654;</span>test

아니면 더 괜찮은 것 가정합니다 CSS에만 접근 (working example) 선택 :

<span class="opened">test</span> 
<br> 
<span class="closed">test</span>

그리고 CSS 코드 :

.opened::before { 
    display: inline-block; 
    content: "▼"; 
    width: 30px; 
} 

.closed::before { 
    display: inline-block; 
    content: "▶"; 
    width: 30px; 
}

을

출처

2012-12-13 16:32:30 Jonathan

대단히 고마워요! 하나의 작은 추가 질문 : 'width : 1em'은 (다른 밀도의 디스플레이에 대해) 확장 가능하게할까요? – Andrej

당신은 노드가 열리고 닫히는 트리 구조를 만들고 있다고 올바르게 생각했습니다. "before"셀렉터의 트릭도 도움이되었습니다 :-) 또한 ► (►) 문자가 ▶ (▶)보다 적합하다는 것을 알았습니다. – Andrej

@Andrej 디스플레이 밀도가 무슨 뜻인지 모르겠지만'em'에 너비를 지정하면 더 큰'font-size'를 설정할 때 더 넓어집니다. 여기에 [예제] (http://jsfiddle.net/jhogervorst/yeAHK/) 폭과'2em' 폭이 있습니다. – Jonathan

만들기 웹 페이지의 모든 유니 코드 문자

답변

관련 문제