스팬 요소의 줄 바꿈 방지
나는 있습니다<span>
줄 바꿈 없이 표시할 요소입니다.내가 어떻게 그럴 수 있을까?
이것을 CSS에 넣으십시오.
white-space:nowrap;
자세한 내용은 여기에서 확인하십시오. http://www.w3.org/wiki/CSS/Properties/white-space
white-space
그white-space
속성은 요소 내부의 공백이 처리되는 방식을 선언합니다.
가치
normal
이 값은 사용자 에이전트에게 공백 시퀀스를 축소하고 필요에 따라 줄 바꿈 상자를 채우도록 지시합니다.
pre
이 값을 사용하면 사용자 에이전트가 공백 시퀀스를 축소할 수 없습니다.줄은 원본의 새 줄에서만 끊어지거나 생성된 내용에서 "\A"가 발생할 때만 끊어집니다.
nowrap
이 값은 '보통'과 마찬가지로 공백을 축소하지만 텍스트 내의 줄 바꿈은 표시하지 않습니다.
pre-wrap
이 값을 사용하면 사용자 에이전트가 공백 시퀀스를 축소할 수 없습니다.소스의 새 줄에서 줄이 끊어지고, 생성된 내용에서 "\A"가 발생할 때 줄 상자를 채우는 데 필요한 경우 줄이 끊어집니다.
pre-line
이 값은 사용자 에이전트가 공백 시퀀스를 축소하도록 지시합니다.소스의 새 줄에서 줄이 끊어지고, 생성된 내용에서 "\A"가 발생할 때 줄 상자를 채우는 데 필요한 경우 줄이 끊어집니다.
inherit
요소의 부모 속성과 동일한 지정된 값을 사용합니다.
공백 문자의 줄 바꿈만 방지해야 하는 경우
단어 사이의 엔티티:
No line break
대신에
<span style="white-space:nowrap">No line break</span>
white-space: nowrap
올바른 솔루션이지만 줄 바꿈을 방지할 수 있습니다.두 요소 사이의 줄 바꿈만 방지하려면 다음과 같이 더 복잡해집니다.
<p>
<span class="text">Some text</span>
<span class="icon"></span>
</p>
스팬 사이의 구분을 방지하지만 "일부"와 "텍스트" 사이의 구분을 허용하려면 다음을 수행합니다.
p {
white-space: nowrap;
}
.text {
white-space: normal;
}
파이어폭스는 그만하면 충분합니다.Chrome에서는 추가적으로 스팬 사이의 공백을 다음으로 교체해야 합니다.
(공백 공간을 제거해도 작동하지 않습니다.)
부트스트랩 4 클래스 포함:
text-nowrap
참조: https://getbootstrap.com/docs/4.0/utilities/text/ #text-text
언급URL : https://stackoverflow.com/questions/7300760/prevent-line-break-of-span-element
'programing' 카테고리의 다른 글
테두리 반지름(%)(%) 및 픽셀(px) 또는 em) (0) | 2023.08.15 |
---|---|
함수의 PowerShell 변수 증가 (0) | 2023.08.15 |
전면 및 백엔드(앵글 2 및 스프링) 메이븐 멀티모듈 프로젝트 만들기 (0) | 2023.08.15 |
Mariadb에서 봄 부츠와 긴 트랜잭션 [소켓 예외] (0) | 2023.08.15 |
주소 표시줄 표시 시 100vh 높이 - Chrome Mobile (0) | 2023.08.15 |