html - HTML ボタン内のテキストのハイフネーション

Question

固定幅のボタンがあります。このボタン内には<b>、名前を含むタグがあります。名前は可変で、ボタンの幅より長くなる場合があります。

ブラウザーで表示すると、長いテキストはボタンに収まりません。ボタンのテキストをハイフネーションする方法はありますか? テキストには「スペース」はありませんが、アンダースコアは「_」です。

Answer 1

CSSの text-overflowプロパティを使用して、切り取られたテキストを表すために使用するカスタム文字列を指定できます。例えば、

HTML

<div>
 some overflowing text
</div>

CSS

div{
 width:25px;
 height:30px;
 border:1px solid;
 overflow:hidden;
 white-space:nowrap;
 text-overflow: "_";
}

デモ

Answer 2

はい、「ハイフン」CSS プロパティを使用してこれを実現できます。ワードハイパーネーションについてもっと読む

.button{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
width:90px;
}

デモ