1

単純な 2 語のヘッダーがあり、ウィンドウに両方の単語を表示する十分なスペースがない場合、最後の単語を次の行に折り返すのではなく、削除または非表示にしたいと考えています。

<h1>First Last</h1>

CSS の最初の単語セレクターがないことはわかっているので、それはオプションではありません。オーバーフローを非表示にすることもできますが、文字ごとではなく、最後の単語を一度に消したいです。そしてもちろん、white-space:nowrap;頭に浮かびますが、それはその言葉を取り除くものではありません.

cssでこれを行う方法はありますか? 高さや幅が固定されていないことが望ましいですか？

http://jsfiddle.net/pnaL4/2/

4

4 に答える 4

2

単純。white-space:nowrap;CSS プロパティを使用します。

h1 {
    white-space: nowrap;
}

これにより、ウィンドウのサイズが変更された場合でも、テキストが折り返されず、ウィンドウが縮小するにつれて非表示になります。

これは、問題を説明するためのWORKING DEMOです。

于 2013-07-09T10:36:53.787 に答える
1

私は通常、次のようなことをします

h1 {
  font-size: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 745px;

}

省略記号出力...さらにテキストがあることを示すために、何もしたくない場合は私がします

text-overflow: inherit;

テキストを切り取る場合のもう 1 つのヒントは、h1 に title 属性を追加して、ユーザーがホバー時に単語全体を表示できるようにすることです。

例えば

<h1 title="First Last">First Last</h1>
于 2013-07-09T10:40:48.123 に答える
1

オーバーフローした単語を次の行に分割する場合は、幅ではなく高さでオーバーフローを使用して、その効果を作成できます。

h1 {
    height: 30px;
    overflow: hidden;
}

例

于 2013-07-09T10:40:59.490 に答える