CSS text-overflowにellipsisを指定して文末にドット3つ(…)を表示する
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
書き方 text-overflow : 値
text-overflow: ellipsis;
文末にドット3つ(…)が表示されます。テーブルの列幅をはみ出しません。
ellipsisは、省略記号という意味です。
使用例
<!DOCTYPE html> <html> <head> <style> .cftA { width: 80px; border: 1px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;/*text-overflowにellipsisを指定*/ } </style> </head> <body> <p class="cftA">studyskill1233</p> </body> </html>
結果
文字「studyski」文末にドット3つ(…)を表示します。