HTML テキストオーバーフローの省略記号検出 質問する

HTML テキストオーバーフローの省略記号検出 質問する

私のページには、CSS ルールwhite-spaceoverflowtext-overflow設定されている要素がいくつかあり、オーバーフローしたテキストはトリミングされ、省略記号が使用されます。

div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  border: 1px solid black;
  width: 150px;
  margin: 5px;
  padding: 5px;
  font-family: sans-serif;
}
<div>
  <span>Normal text</span>
</div>
<div>
  <span>Long text that will be trimmed text</span>
</div>

JavaScript を使用して、どの要素のコンテンツがオーバーフローしているかを検出する方法はありますか?

ベストアンサー1

span 要素を引数として渡して、次の JS 関数を試してください。

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

おすすめ記事