스팬 요소의 줄 바꿈 방지

나는이 <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;
}

Firefox에는 충분합니다. Chrome에서는 범위 사이의 공백을으로 대체해야합니다  . 공백을 제거해도 작동하지 않습니다.

Bootstrap 4 클래스 사용시 :

text-nowrap

참조 : https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow