CSS text-overflowにellipsisを指定して文末にドット３つ(…)を表示する

2022年11月17日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
書き方 text-overflow : 値
text-overflow: ellipsis;
文末にドット３つ(…)が表示されます。テーブルの列幅をはみ出しません。
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」文末にドット３つ(…)を表示します。

CSS

Posted by arkgame