枠から文字がはみ出ないようにする - オーバーフローしたテキストを非表示にする

概要

文字が枠からはみ出す際にはみ出した部分を非表示にする場合、スタイルシートでwhite-spaceとoverflowプロパティを設定します。

white-space: nowrap;
overflow: hidden;

加えて、text-overflowプロパティを設定し文字列をクリップ表示します。

text-overflow: clip;

コード

overflow-clip.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-clip.css" />
</head>
<body>
  <div class="ClipFrame">長い文字列はクリップされます。</div>
  <div class="ClipFrame">そのまま表示</div>
</body>
</html>

overflow-clip.css

.ClipFrame {
  margin-left:128px;
  margin-top:8px;
  margin-bottom:8px;

  background-color:#D0D0D0;
  border:solid 1px #009339;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

safari,operaに対応する場合

.ClipFrame {
  margin-left:128px;
  margin-top:8px;
  margin-bottom:8px;

  background-color:#D0D0D0;
  border:solid 1px #009339;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  -webkit-text-overflow: clip; /*Safari用*/
  -o-text-overflow: clip; /*Opera用*/
}

実行結果

上記のHTMLファイルを表示すると下図の表示結果となります。文字が枠からはみ出さずに表示できています。
枠から文字がはみ出ないようにする - オーバーフローしたテキストを非表示にする:画像1

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。最近は生成AIの画像生成の沼に沈んでいる。

作成日: 2014-01-06

目次

枠から文字がはみ出ないようにする - オーバーフローしたテキストを非表示にする

目次

概要

コード

safari,operaに対応する場合

実行結果

関連するページ