>웹 프론트엔드 >CSS 튜토리얼 >Div의 너비를 채우기 위해 텍스트를 수평으로 늘리려면 어떻게 해야 합니까?

Div의 너비를 채우기 위해 텍스트를 수평으로 늘리려면 어떻게 해야 합니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-23 16:49:15405검색

How Can I Make Text Stretch Horizontally to Fill a Div's Width?

Div 너비에 맞게 텍스트를 가로로 늘이기

웹 개발에서는 특정 텍스트의 div를 채우기 위해 텍스트를 가로로 확장하는 것이 바람직한 경우가 많습니다. 너비. 그러나 기본적으로 텍스트는 추가 공간을 차지하도록 늘어나지 않습니다.

해결책: 텍스트 정렬 및 인라인 요소

이 효과를 얻으려면 CSS 텍스트를 활용할 수 있습니다. -align:사소한 해킹과 함께 정당화:

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}
<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

div 내의 텍스트를 정당화하고 전체 div에 걸쳐 있는 너비를 가진 빈 범위 요소를 추가하여 사용 가능한 공간을 채우기 위해 텍스트를 가로로 늘립니다.

이 기술을 사용하면 텍스트가 길이에 관계없이 항상 div를 완벽하게 채우고 시각적으로 매력적인 레이아웃.

위 내용은 Div의 너비를 채우기 위해 텍스트를 수평으로 늘리려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.