web-dev-qa-db-ja.com

HTML要素間の改行を避ける

この<td>要素があります：

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

私はこれを単一の行に保ちたいと思っていましたが、これは私が得るものです：

enter image description here

ご覧のとおり、フラグと電話番号は別々の行にあります。 &nbsp;は、電話番号の番号の間で機能していますが、フラグと電話番号の間では機能していません。

レンダラーによって改行がまったく導入されないようにするにはどうすればよいですか？

htmlwhitespace
85
dangonfast

コンテンツの改行を防ぐ方法はいくつかあります。 &nbsp;の使用は1つの方法であり、単語間で正常に機能しますが、空の要素と一部のテキストの間で使用しても、明確な効果はありません。同じことは、アイコンに画像を使用する、より論理的でアクセスしやすいアプローチにも当てはまります。

最も堅牢な代替手段はnobrマークアップを使用することです。これは非標準ですが、CSSが無効になっている場合でも広くサポートされており、機能します。

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

（この場合、スペースの代わりに&nbsp;を使用できますが、必須ではありません。）

別の方法は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>
121
Jukka K. Korpela

そのtdのCSS：white-space: nowrap;はそれを解決するはずです。

49
tcak

いくつかの単語または要素に対してこれが必要であるが、TDまたは同様のもの全体に適用できない場合、Spanタグを使用できます。

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

クラスバージョンを使用する場合は、受け入れられた回答の詳細に従ってCSSを設定することを忘れないでください。

3
Greg Little

<i>タグがブロックとして表示されず、probelmが発生する場合、これは機能するはずです。

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

2
ameagher

これが実際のソリューションです。

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

例、常にテキストの前にある画像：

enter image description here

1
Andrey Izman

nobrは信頼性が低く、テーブルを使用します

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

それはすべて同じ線上にあり、すべてがお互いに水平であり、後で何かを変更したい場合は、はるかに自由があります。

0
Erik Österling

場合によっては（たとえば、JavaScriptによって生成および挿入されたhtml）、幅がゼロのジョイナーを挿入することもできます。

.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>
0
hugo der hungrige