枠から文字がはみ出す際に「…」で省略する - "..."によるオーバーフローテキストの省略 - CSS
枠から文字がはみ出す際に「…」で省略する方法を紹介します。
概要
文字が枠からはみ出す際に省略させる場合、スタイルで
text-overflow: ellipsis;
を設定すると、末尾に"..."を付加してて文字列を省略表示できます。
ただし、text-overflow のみを設定した場合、枠に文字列が収まりきらない場合に文字列が折り返して表示されるため、
white-space: nowrap;
overflow: hidden;
を設定して文字列が折り返されないようにする必要があります。
コード
overflow-omission.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="overflow-omission.css"/>
</head>
<body>
<div class="OmissionFrame">長い文章は枠をはみ出さないよう省略されます。</div>
<div class="OmissionFrame">短文非省略</div>
</body>
</html>
overflow-omission.css
.OmissionFrame {
margin-left:128px;
background-color:#D0D0D0;
border:solid 2px #009339;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
safari,operaに対応する場合
.ClipFrame {
margin-left:128px;
background-color:#D0D0D0;
border:solid 2px #009339;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis; /*Safari用*/
-o-text-overflow: ellipsis; /*Opera用*/
}
解説
テキストが表示される枠のスタイルに
text-overflow: ellipsis;
を指定することにより、枠に文字列が収まらない場合に "..." で文字列が省略されます。
実行結果
上記のHTMLファイルを表示します。下図の画面が表示されます。長い文字列が省略されていることがわかります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
