web-dev-qa-db-ja.com

レスポンシブデザインで長いタイトルを省略記号に変えようとしています

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

これが例です

Example of what I'd like to achieve

誰か助けてもらえますか？

編集：

Max-widthとEllipsisオーバーフローを次のように追加しました。

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

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

textresponsive-designtitlebar
14
Jody Heavener

ストレートCSSでこれを処理できることを誰が知っていましたか？驚きましたが、text-overflowプロパティを確認してください。可能な値の1つはEllipsisです！ https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

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

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

.title {
    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は子のtitle要素に対して魔法をかけることができます。

21
Tayler