Ionic-framework: ボタンの長いテキストが切り捨てられない

作成日 2016年10月14日 · 3コメント · ソース: ionic-team/ionic-framework

問題の簡単な説明：

ボタンの長いテキストは切り捨てられません。 full ＃$ボタンとblockボタンを使用しています

以下に示すように、ボタンには省略記号があります。

.button {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button-innerクラスにはdisplay: flexがあるため、これは機能しません

どのような行動を期待していますか？

省略記号を表示します。

これは、 .button-inner inlineに設定することで実行できます。しかし、ディスプレイがフレックスである理由はよくわかりません。

どのイオンバージョン？ 2 RC.0

core feature request

ソース

alan-agius4

👍2

最も参考になるコメント

フレックスはセンタリングに役立つと思いますか？皆さんがどのように修正したいかはわかりませんが、私がこのような修正を行うことができた唯一の方法は、別のインナーチャイルドを与えることです。例えば

`` `

I then put a class on `.overflow-me` to do the ellipsis.

.overflow-me {
オーバーフロー：非表示;
テキストオーバーフロー：省略記号;
}
`` `

ncapito 2016年11月28日

👍3 🎉1

全てのコメント3件

`` `

I then put a class on `.overflow-me` to do the ellipsis.

.overflow-me {
オーバーフロー：非表示;
テキストオーバーフロー：省略記号;
}
`` `

ncapito 2016年11月28日

👍3 🎉1

ボタンは非常に多くのコンポーネントで使用されているため、これは実際にはかなり複雑です。ボタンに内部divを追加すると、他の場所で問題が発生し、表示をフレックスからインラインに変更すると、ボタンのようにスタイル設定されたアイコンとアンカーリンクを含むボタンで問題が発生します。 @ncapitoによる上記のコードが機能するため、今のところマイルストーンからこれを削除しますが、この問題を再検討します。

brandyscarney 2016年12月05日

問題をありがとう！非アクティブなため、この問題は解決されています。これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。

Ionicをご利用いただきありがとうございます。

ionitron-bot[bot] 2018年03月26日

このページは役に立ちましたか？

0 / 5 - 0 評価

Ionic-framework: ボタンの長いテキストが切り捨てられない

問題の簡単な説明：

どのような行動を期待していますか？

最も参考になるコメント

全てのコメント3件

関連する問題