고정 폭 글꼴 없이 CSS를 사용하여 점으로 텍스트를 정렬하는 방법은 무엇입니까?

CSS를 사용하여 점으로 텍스트를 정렬하는 방법

쿼리

다음과 같이 앞에 점이 있는 텍스트를 균일하게 표시하는 방법을 모색합니다.

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

고정폭 글꼴을 사용하지 않음.

솔루션

CSS와 dl(설명 목록) 요소를 활용하는 간단하면서도 효과적인 솔루션:

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>
    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>
</dl>

제한 사항:

• Internet Explorer 8 이하에서는 지원되지 않음 .
• ·과 같은 HTML 엔터티를 제외하고 콘텐츠 속성에서 리터럴 문자만 허용합니다. 그러나 대부분의 실제 시나리오에서는 UTF-8 문자로 충분합니다.

위 내용은 고정 폭 글꼴 없이 CSS를 사용하여 점으로 텍스트를 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!