「CSS」ellipsisで文末にドット３つ(…)を表示する

2022年3月4日

書式
text-overflow: ellipsis;
text-overflowにellipsisを指定して文末はドット3つ(…)になります。

使用例

<!DOCTYPE html>
<html>
<head>
<title>ellipsisで文末にドット３つ(...)を表示する</title>
</head>
<body>

<style>
  .cft {
    width: 85px;
    border: 1px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<p class="cft">this is a test</p>

</body>
</html>

CSS

Posted by arkgame

関連記事: