>  기사  >  웹 프론트엔드  >  두 인라인 요소 사이에 줄 바꿈을 추가하는 방법

두 인라인 요소 사이에 줄 바꿈을 추가하는 방법

不言
不言원래의
2019-04-15 14:06:212642검색

내부 링크 요소는 일반적으로 의미 수준에 따른 기본 요소입니다. 텍스트나 기타 인라인 요소만 수용할 수 있습니다. 예를 들어 텍스트와 같은 요소는 각 문자 사이에 가로로 정렬되고 자동으로 오른쪽 끝으로 줄 바꿈됩니다. 두 인라인 요소 사이에 줄바꿈을 추가하시겠습니까?

이 글에서는 두 인라인 요소 사이에 줄 바꿈을 추가하는 방법을 소개합니다.

두 인라인 요소 사이에 줄 바꿈을 추가하는 방법

두 개의 인라인 요소가 필요하고 그 중 하나가 다른 요소 안에 다음 줄을 삽입하는 경우 의사 요소를 추가하여 이를 수행할 수 있습니다: afterwith content:'a'. 및 공백:pre

구체적인 코드 예를 살펴보겠습니다

HTML 코드:

<h3>
    <span class="label">PHP中文网1</span>
    <span class="secondary-label">PHP中文网2</span>
</h3>

CSS code

<style type="text/css">
        .label:after {
    content: &#39;\A&#39;;
    white-space: pre;
}
    </style>

실행 결과는 다음과 같습니다. 결과에서 볼 수 있듯이, 텍스트가 두 개가 됩니다.

두 인라인 요소 사이에 줄 바꿈을 추가하는 방법

이 기사는 여기까지입니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 CSS Video Tutorial 칼럼을 주목하세요! ! !

위 내용은 두 인라인 요소 사이에 줄 바꿈을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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