朝会発表テーマ

サイズが決められた枠からはみ出す文字に対応する(CSS)

対応例

[n]は対応に必要なCSSの行数。

文字を全て表示する方針の場合

文字列が切れてしまっても良い場合

下記のような機能はCSSの命令には存在しない
→JavaScriptやサーバーサイドのプログラムで対応する必要がある。
・エクセルの「縮小して全体を表示する」(枠に合わせてフォントサイズが小さくなる)
・(複数行で)最後の文字を「・・・」にする

余談： .NET Framework (C#、VB.NET)では？

LabelコントロールのAutoEllipsisプロパティを使って、
文字列がはみ出した場合に省略を示す記号の表示を切り替えることができる。

左：AutoEllipsisプロパティをfalseにセット、右：trueにセット。

レジュメ用HTML

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
</head>
<body>

<style>
p {
  margin: 5px 50px;
  font-weight: bold;
}
div {
  margin: 5px 50px 40px;
  width: 200px;
  height: 80px;

  border: solid 1px red;
}
/* はみ出した部分を表示しない */
div.cut {
  overflow: hidden;
}
/* スクロールバーを出す */
div.scroll {
  overflow: scroll;
}
/* 1行につき13文字入るようにフォントサイズを調整 */
div.small-font {
  font-size: calc((200px / 13) - 0.5px);/* 端数処理の差異を鑑みて0.5小さめ */
}
/* 1行で打ち切って「…」を出す */
div.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* はみ出した部分を表示しない＆右下に「→」を重ねる */
div.pseudo-elem {
  position: relative;
  overflow: hidden;
}
div.pseudo-elem::after {
  position: absolute;
  bottom: 0;
  right: 0;

  text-align: center;

  background: #ccc;
  content: '（すべて表示）';
}
</style>


  <p>枠からはみ出してしまっている文字列</p>
  <div>
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

  <p>はみ出した部分を表示しない[1]</p>
  <div class="cut">
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

  <p>スクロールバーを出す[1]</p>
  <div class="scroll">
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

  <p>1行につき13文字入るようにフォントサイズを調整[1]</p>
  <div class="small-font">
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

  <p>1行で打ち切って「…」を出す[3]</p>
  <div class="one-line">
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

  <p>はみ出した部分を表示しない＆右下に文言を重ねる[8]</p>
  <div class="pseudo-elem">
    色は匂へど散りぬるを我が世誰そ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず
  </div>

</body>
</html>

コメント