[html] HTML 요소 사이의 줄 바꿈 방지

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

가장 강력한 대안은 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>

답변

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

.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>

.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 */
}

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