스팬 요소의 줄 바꿈 방지

스팬 요소의 줄 바꿈 방지

이 질문에는 이미 다음과 같은 답이 있습니다.

어떻게 하면 텍스트가 한 줄 이상 차지하는 것을 막을 수 있습니까? (5개 답변)

마감됨2년 전에.

나는 있습니다<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