css text-overflow: ellipsis を可変対応したい

Question

ウィンドウサイズが可変になった際にそれに合わせて text-overflow: ellipsisで長い文字を省略することは可能でしょうか

<span class="text js-title text-btn" title="長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章">長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章

.text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.4;
}

Comments

[kei344]

まず試してみてはいかがでしょう。その上で「何を試したときに」「どうなると思って」「どうなったのか」を、スクリーンショットなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[yoshinavi]

省略されたテキスト部分は、SEO的にみれば、無意味となる場合が多く、作りによってはペナルティの対象になる場合もあります。

今回の場合、クリック等で全文が見れない構成だと、ユーザーにとっても無意味になるので、使用する際は、注意が必要かと思います。

Answer 1

その要素に幅指定してみては？

以下例

.text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.4;

  /* 以下を追加*/
  max-width: 100%;
}