CSS를 사용하여 텍스트를 정렬하고 빈 공간을 점으로 채우는 방법은 무엇입니까?

CSS를 사용하여 텍스트 정렬 및 점으로 공백 채우기

이 질문은 텍스트를 균일하게 정렬하고 나머지 공간을 점으로 채워야 하는 필요성에 대해 논의합니다. 특히 약물 및 복용량과 함께 제품 정보를 표시하는 데 적합합니다.

CSS 솔루션

CSS를 사용하여 이러한 형식을 달성하기 위해 우아하고 부분적으로 지원되는 솔루션이 제공됩니다.

<code class="css">dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }</code>

HTML 구현

<code class="html"><dl>

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

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

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


</dl></code>

제한 사항

이 솔루션에는 다음과 같은 제한 사항이 있습니다.

• 8 이전의 Internet Explorer 버전에서는 지원되지 않습니다.
• 콘텐츠 속성은 ·와 같은 HTML 엔터티가 아닌 리터럴 문자만 허용합니다. 그러나 UTF-8 문자는 이러한 맥락에서 광범위한 요구 사항을 충족합니다.

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