オーバーフローの省略記号が出てこない

Question

headタグがオーバーフローしたときに...記号が表示されないのはなぜですか？ headタグの省略記号を表示するにはどうすればよいですか？

spanは大丈夫ですがh4はオーバフローで...記号が出てきませんでした

css
div {
    width: 250px;    overflow: hidden;
    white-space: nowrap;

    text-overflow: ellipsis;
}
<div>
   <h4>test あああああああああああああああああああ</h4>
   <span>ああああああああああああああああ test test</span>
</div>

Answer 1

h4 要素は span 要素と異なりブロックレベル要素であるため、 h4 要素自体にも text-overflow, overflow プロパティを適用する必要があります。これを行うと CSS は以下のようになり、質問者さんの実現したいことが行えます (動作確認用リンク)。

§ 4.1. Overflow Ellipsis: the text-overflow property

This property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible.

div {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

h4 { /* 追記 */
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

CSSの仕様書でインライン要素（正しい呼称ではない）のみ適応されると決まっているからです。

CSS Overflow Module Level 3

This property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has 'overflow' other than 'visible'.

Comments

[kyoya0819]

回答全く被った