特定の文字列以降を非表示にしたい。

Question

ブログ関連でタイトルがたまに長くなってしまうことがあるので、二行以降はCSSで非表示にすることができました。

-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
overflow: hidden;

しかし、その前に長いときは大抵「タイトル - サブタイトル」と入力しているので、「-」以降を非表示にしたいです。

JavaScriptなどを使っっても良いので教えていただけないでしょうか。

Comments

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[2001Y]

申し訳ないのですが自分の解決策が浮かびません。非表示にする等はやったのですが、この質問にはあまり関係ないかと思いまして。

Answer 1

サブタイトル部をspanタグで囲って、cssで非表示にするのが良いかと。

javsscriptで正規表現等使って-以降を非表示にする方法も考えましたが、タイトルやサブタイトルに-が現れる事を考えたらあまり良い手とは言えないでしょうし。

Comments

[2001Y]

なるほど。
貴重なご意見ありがとうございます。
自分は非常にめんどくさがりやでいちいちspanをつけるのが。。。なので、JavaScriptで行うコードを教えていただけないでしょうか。
JavaScriptは全然わからないのですが、クラス内のH2のみに適用と言ったことはできないのでしょうか。

[hitsujimeeee]

クラス内のh2のみ、とは？
あるクラスが付いているタグ内にh2タグがあって、その中にはサブタイトルが入っているということでしょうか。

ページの構造が見えてこないのでいまいち実現したい事がわかりません。具体的なソースコードを質問文に追加して頂けると回答しやすいです。