Javascript에서 줄 바꿈을 만드는 방법

| | | |

의사 요소를 사용하여
줄바꿈 반환을 사용하지 않고도 HTML 요소에 줄 바꿈을 추가할 수 있습니다. 의사 요소는 요소의 특정 부분을 모델링하는 데 사용됩니다. 여기에서는 줄 바꿈을 추가하기 위해 HTML 요소의 스타일을 지정하기 위해:: after를 사용할 것입니다.


위 코드에서 :: after 의사 요소를 사용합니다. 각 인라인 요소(범위로 표시)에서 텍스트 범위 줄 뒤에 캐리지 리턴("a"로 표시)을 추가합니다. 이 경우 :: after에는 사용할 수 있는 content 속성과 공백 속성이 있습니다.

"content" 속성은 지속 시간에 삽입하려는 항목을 설명합니다. 여백 속성은 여백을 보존해야 하는지 여부를 알려줍니다. 이 특정 속성을 비활성화하면 베이의 인라인 잠금 기능을 방해하지 않습니다. 따라서 이를 대체하기 위해 이 특정 속성을 추가해야 합니다.

스타일과 레이아웃을 더 많이 사용하면서 위의 솔루션이 반드시 최상의 솔루션은 아님을 알게 될 것입니다. 배경과 함께 어떤 종류의 패딩을 추가하면 이러한 CSS 속성이 배경이 들어오는 위치에서 희미해지는 경향이 있음을 알 수 있습니다. 요점을 설명하는 아래 샘플 코드를 참조하십시오.

교수 덤블도어

McGonagall 교수

교수 불량

교수 Trelawney

이와 유사한 결과를 제공하는 다른 솔루션 - 배경이 이전 줄에서 시작된 다음 다음 줄에서 올바른 배경 텍스트로 캐리지 리턴을 수행합니다. 비슷한 결과를 얻기 위해 위의 span 클래스에 추가할 수 있는 box decoration break: clone CSS 속성을 기억하지만 실제로 원하는 결과를 제공하지는 않습니다.

차단에서

또는