Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されない
お仕事でちょっとハマったので共有です。Android、iPhoneではbutton要素にtext-overflow:ellipsisが適用されません。
次のようなCSSを適用した場合、iPhone(iOS4-6)、Android(Android4.12)ではp要素はtext-overflow:ellipsisが適用されていますが、button要素にはtext-overflow:ellipsisが適用されません。
p,button{
width:100px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
すこし不細工ですがbutton要素の内側にspan要素などを記述すればtext-overflow:ellipsisが適用されています。
p,button span{
width:100px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
button span{
display: block
}
関連エントリー
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
@keyframesとAndroid
Androidとtransformとinputのバグ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スポンサードリンク
«jQuery Mobile 1.4.0ではフラットデザインが採用 | メイン | ローカルのWebサイトを確認する方法»