JS テキストがその部分を超える場合、マウスを置いたときに省略記号を使用してコンテンツ全体を置き換えます

テキストを超えるテキストの部分は省略記号に置き換えられます

1.単線

<div style='width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;'>内容</div> 

• width: width; (各行の幅を指定)
• overflow: hidden (オーバーフロー部分は非表示)
• white-space: nowrap; (すべてのテキストを同じ行に表示し、改行を禁止します)
• text-overflow:ellipsis; (オーバーフロー テキストを省略記号に置き換えます)

2. 複数行

<div style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'>内容</div> 

• display: -webkit-box; (CSS3 の新機能、流動的なレイアウトは幅に適応できます)
• overflow: hidden (オーバーフロー部分は非表示)
• -webkit-line-clamp: number of lines; (CSS3 の新機能、ブロック コンテナー内のコンテンツを指定された行数に制限し、余分な部分の省略記号を表示します)
• -webkit-box-orient: vertical; (div のすべてのサブ要素の配置を指定します。vertical は垂直方向の配置を意味します)

マウスオーバーですべてのコンテンツを表示

div 要素の title 属性を使用する

<div 
	title='内容'
	style='display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical;'
>内容</div>