1. Home
  2. スタイルシート CSS
  3. テキスト・フォント
  4. 領域からはみ出た場合に「...」を表示する

領域からはみ出た場合に「...」を表示する


text-overflow: ***;

ブラウザ
IE6
Sf
Cr
特性
独自拡張プロパティ

text-overflow は、テキストが領域からはみ出ている場合に、末尾に省略符号( ... )を表示するかどうかを指定するプロパティです。



p {
text-overflow: ellipsis;
}


プロパティ名 説明
text-overflow clip 省略符号を表示しない
ellipsis 省略符号を表示する

※このプロパティは、CSS 2では定義されていません。


使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 200px;
height: 3em;
border: 1px #808080 solid;
overflow: auto;
white-space: nowrap;
}

p.example1 { text-overflow: clip; }
p.example2 { text-overflow: ellipsis; }

</style>

</head>
<body>

<p class="example1">領域からはみ出ている場合に省略符号を付けるかどうかを指定します。</p>

<p class="example2">領域からはみ出ている場合に省略符号を付けるかどうかを指定します。</p>

</body>
</html>

表示例

領域からはみ出ている場合に省略符号を付けるかどうかを指定します。

領域からはみ出ている場合に省略符号を付けるかどうかを指定します。


テキスト・フォント

ページの先頭へ


inserted by FC2 system