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サイトを確認する方法»