[css]テキストが領域をぶち抜いたら省略させる方法

たまにしか使わないから忘れる。

こう。

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

p{
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

直接指定以外に、こんな感じでもいける。

<div>
    <p><span>　略　</span></p>
</div>

<style>
div{
    width: 120px;
}
p{
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

複数行でやる場合はこう。

p{
  width: 120px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

「-webkit-line-clamp」で行数を決める。

途中で省略することを良しとするコンテンツはあんまりないのでやっぱりすぐ忘れる。

要するに文字を入れるスペースをかっちり構えないといけないので、つまり省略しても大丈夫って前提で組み上げないといけない。

記事一覧でタイトルに文字数上限をつけるみたいな？メールボックスの一覧みたいに。どうなんですかね。