web-dev-qa-db-ja.com

2つの単語が同じ行にあることを確認するにはどうすればよいですか?

私は自分のために人のウェブサイトを作っています。私の短い略歴では、いくつかの単語(または単語のグループ)が強調表示されています。テストの一部で、2つの単語が分割されることがあるので、強調表示効果ががらくたに見えることに気づきました。

次に、それぞれのフォントの外観と、フォントが変更された場合の外観を示します。

[次のようにする必要があります] http://i.imgur.com/MZmyj5S.png

[これが起こってほしくない] http://i.imgur.com/yLoYIza.png

「ウェブ開発者」が2行に押しやられていることに注目してください。彼らが一緒にいることを確認できる方法はありますか?

前もって感謝します! -アダム

PS:現在のコードを確認する必要がある場合は、お知らせください。それは多くのことを助けるだろうとは思わない。

19
Adam Bowker

改行しないスペース( )2つの単語の間:

Word1 Word2

これは、フランス語の句読点と数字に関して特に役立ちます。

より大きな規模でこれが必要な場合は、CSSを使用できます。

div {
  white-space: nowrap;
}
<div>Word 1 Word2 Word3</div>

テキストとsvgが同じ行に並ぶようにする場合は、この方法を使用する必要があります。改行しないスペースは機能しません。

Nowrapクラスを作成してどこにでも適用できます:

<span class="nowrap">No one can wrap us</span>
28
Huangism

CSSの方法:

a { white-space: nowrap; }
2
Geomatic