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

Question

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

ここ

が

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

編集：

は、私はこのような最大幅と省略記号のオーバーフローを追加しました：

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

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

Answer 1

あなたはまっすぐなCSSでこれを処理できることを誰が知っていましたか？私は驚きましたが、text-overflowのプロパティをチェックしてください。可能な値の1つは省略記号です。

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

ひとつのクールな部分は、ノーメディアクエリが必要です。それはすでに応答しています（フィディボックスのペインのサイズを変更してみてください）。

を更新：

ちょうどあなたの更新を見た... あなたの含む要素の幅がさらに100％の割合に設定することができます。次に、overflow: hiddenとwhite-space: nowrapは、子のtitle要素で魔法を使うことができます。