HTML 요소 사이의 줄 바꿈 방지

이 <td>요소가 있습니다.

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

나는 이것을 한 줄로 유지하고 싶었지만 이것이 내가 얻는 것입니다.

보시다시피 깃발과 전화 번호는 별도의 줄에 있습니다. 는  하지만 플래그와 전화 번호 사이, 전화 번호의 숫자 사이에서 일하고있다.

렌더러에서 줄 바꿈이 전혀 없는지 어떻게 확인할 수 있습니까?

콘텐츠에서 줄 바꿈을 방지하는 방법에는 여러 가지가 있습니다. 사용  은 한 가지 방법이며 단어 간에는 잘 작동하지만 빈 요소와 일부 텍스트 사이에 사용하면 잘 정의 된 효과가 없습니다. 아이콘에 이미지를 사용하는 더 논리적이고 접근하기 쉬운 접근 방식에도 동일하게 적용됩니다.

가장 강력한 대안은 nobr비표준이지만 보편적으로 지원되고 CSS가 비활성화 된 경우에도 작동 하는 마크 업 을 사용 하는 것입니다.

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(  이 경우 공백 대신 사용할 수 있지만 반드시 그럴 필요는 없습니다 .)

또 다른 방법은 nowrap속성입니다 (더 이상 사용되지 않거나 더 이상 사용되지 않지만 일부 드문 단점을 제외하고는 여전히 잘 작동 함).

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

그런 다음 CSS 지원 브라우저에서 작동하고 약간 더 많은 코드가 필요한 CSS 방식이 있습니다.

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

해당 td에 대한 CSS : white-space: nowrap;해결해야합니다.

여러 단어 또는 요소에 대해 필요하지만 전체 TD 또는 유사 항목에 적용 할 수없는 경우 Span 태그를 사용할 수 있습니다.

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

클래스 버전을 사용하는 경우 허용되는 답변에 자세히 설명 된대로 CSS를 설정해야합니다.

는 IF <i>태그가 블록으로 표시되고 probelm의 원인이되지 다음이 작동합니다 :

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

경우에 따라 (예 : JavaScript에서 생성 및 삽입 한 html) 너비가 0 인 조이너를 삽입 할 수도 있습니다.

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

이것이 진정한 해결책입니다.

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

css :

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

예, 항상 텍스트 앞에있는 이미지 :

nobr은 너무 신뢰할 수 없습니다. 테이블을 사용하세요.

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

모든 것이 같은 선에 있고 모든 것이 서로 수평을 이루며 나중에 무언가를 변경하고 싶다면 훨씬 더 많은 자유가 있습니다.