14

レスポンシブ Web アプリを設計しており、タイトルの長いテキストを省略記号でカプセル化したいと考えています。これどうやってするの？レスポンシブページです（固定幅なし）...

ここに例があります

私が達成したいことの例

誰でも助けることができますか？

編集：

次のように、最大​​幅と省略記号のオーバーフローを追加しました。

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

しかし、ここでの鍵は応答性であるため、これはうまくいきません。タイトルの最大幅を iOS モバイル ブラウザー専用にターゲットにするつもりはありません。すべてのスマートフォンで最大幅を拡大または縮小したいと考えています。助言がありますか？

4

1 に答える 1

22

これを直接の CSS で処理できることを誰が知っていましたか? びっくりしましたが、text-overflow物件を調べてみてください。可能な値の 1 つはellipsis! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

フィドルを参照してください: http://jsfiddle.net/PdRqB/

タイトルに 3 つのプロパティを追加する必要があります。

.title {
    width: 100px; /* Need to specify a width (can be any unit). overflow: hidden does nothing unless the width of .title is less than the width of the containing content */
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */
}

優れた点の 1 つは、メディア クエリが必要ないことです。すでに反応しています（フィドルでペインのサイズを変更してみてください）。

アップデート：

あなたの更新を見たところです... 含まれている要素の幅は、パーセンテージ、さらには 100% に設定できます。次に、overflow: hidden子white-space: nowrapタイトル要素に魔法をかけることができます。

于 2013-06-08T04:26:38.383 に答える