ボタンのテキストがあふれているサファリで

私は単純なボタンタグを持っており、特にテキストがボタンをオーバーフローさせたいと思っています。これは現在のブラウザでは問題ありませんが、Safari（iosとosx）はボタンの境界線でテキストをクリップします。ボタンのテキストがあふれているサファリで

button, 
 
.button { 
 
    width: 100px; 
 
    overflow: visible; 
 
    white-space: nowrap; 
 
    text-overflow: 'clip'; 
 
    text-align: left; 
 
    -webkit-appearance: none; 
 
    background: none; 
 
    border: none 
 
}

<button>Very long text Very long text Very long text This Clips In Safari</button> 
 
<div class='button'>Very long text Very long text Very long text This Overflows</div>

私は、テキストがオーバーフローして取得する方法を見つけ出すことはできません。誰でもこの作業を行う方法を知っていますか？

text-overflow: '';

使用このクロスブラウザの互換性のために：

text-overflow: clip;

詳細はこれを参照してください。また、

https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

TIA

出典

2016-12-12 blackmamba

-2

これはサファリのために無効CSSです何が目的なのかわからないoverflow: visible;hiddenに設定しました。

出典

2016-12-12 11:58:47 K48

ボタン境界でクリップされても差はありません – blackmamba

"オーバーフローの目的は何ですか？私はそれを隠された状態に設定したいと思っていた。OPは*ボタンをオーバーフローさせるテキストを望んでいた。 –

実際に参照されたMDNページには、テキストオーバーフローのためのメッセージが記載されています。 _囲みはボックスの境界で起こります。（ ''）._ 元の投稿が有効だったと思います。ここには何の影響もありませんが、テキストは何でも切り詰められます。 – blackmamba

最終的に私は回避策を見つけました。

スパンにテキストをラップしてから、スパンをposition：相対に設定すると、オーバーフローしたテキストがクリップされずに正しく表示されます。

また、テキストオーバーフローを使用するための推奨事項にも注意してください。クリップが間違っていて、これに影響せず、テキストオーバーフロー： 'が有効です。

出典

2017-01-13 11:40:20 blackmamba

ボタンのテキストがあふれているサファリで

答えて

関連する問題