ボタンの名前を短縮表示＋ツールチップを出す

三点リーダー短縮表示＋マウスオーバー時にツールチップを出す。

ソースコード

<button title="あいうえおかきくけこさしすせそたちつてとなにぬねの"><div style="overflow: hidden; width: calc(10vw - 20px); white-space: nowrap; text-overflow: ellipsis;">あいうえおかきくけこさしすせそたちつてとなにぬねの</div></button>

説明 

ツールチップを出すにはbuttonタグにtitle属性をつける。

<button id="hoge" title="あいうえお">あいうえお</button>

通常は折り返されるような長い文字列を途中でカットして三点リーダーを付けてくれるtext-overflow:ellipsisを使う

<div style="overflow: hidden; width: calc(6vw - 20px); white-space: nowrap; text-overflow: ellipsis;">あいうえお</div>

ボタンの widthは、%指定だとボタンの名前の文字列長によってボタンのサイズが変わってしまうため、ビューポート基準（vw）にしている。