[新着] Webテンプレートを仮オープンしました
text-overflow は、領域をはみ出たテキストがある場合に、末尾に省略符号（ ... ）を表示するかどうかを指定するプロパティです。
p {
text-overflow: ellipsis;
}
| text-overflow | ellipsis … （はみ出た場合に「...」を表示します） |
|---|---|
| clip … （「...」を表示しません）デフォルト |
下記の使用例では、ボックスの横幅を固定、自動改行（折り返し）を禁止、収まりきらない内容を表示しない、などの指定を同時に行っています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p {
width: 200px;
overflow: hidden;
white-space: nowrap;
border: 1px #c0c0c0 solid;
}
#example1 { text-overflow: clip; }
#example2 { text-overflow: ellipsis; }
-->
</style>
</head>
<body>
<p id="example1">領域をはみ出た場合に省略符号を付けるかどうかのテストです。</p>
<p id="example2">領域をはみ出た場合に省略符号を付けるかどうかのテストです。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
領域をはみ出た場合に省略符号を付けるかどうかのテストです。
領域をはみ出た場合に省略符号を付けるかどうかのテストです。
