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

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

다양한 제품과 복용량에 걸쳐 데이터를 균일하게 표시해야 하는 상황에서 고정 폭 글꼴을 사용하지 않고 텍스트 서식을 지정하는 방법을 찾으세요. 이 문제는 과거에 해결되었으며 잠재적인 솔루션 중 하나는

와 같은 인라인 스타일을 사용하는 것입니다. 그리고

설명 목록을 생성합니다.

이 맥락에서

요소는 약물 이름을 나타내는 데 사용되는 반면

요소는 복용량을 나타냅니다.

요소를 추가하고 긴 점 문자열이 포함된 의사 요소를 추가합니다(예: ".................................. ................................................." ), 원하는 자리맞추기 효과를 만들 수 있습니다.

다음은 접근 방식을 보여주는 예입니다.

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 엔터티를 사용할 수 없음(예: , "·") 콘텐츠 속성의 제한으로 인해

이러한 제한에도 불구하고 대부분의 실용적인 목적을 위해 이 접근 방식은 CSS를 사용하여 양쪽 맞춤 텍스트를 만들고 점으로 공간을 채우는 우아하고 눈에 거슬리지 않는 방법을 제공합니다. .

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