「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>

</body>

</html>

<!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>

<!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

関連投稿: