###前提・実現したいこと
DIVのテキストの一部分だけを非表示にしたいのですが、CSSでの指定方法が判りません。ご存知の方がいらっしゃれば、教えていただけないでしょうか。
具体的には、下記のように宣言されているDIVがあり、この子要素と値のうち、 "ccc" の部分だけを非表示にしたいのです。
###ソースコード
HTML
1<div class="line-item"> 2 <span class="line-item--heading">aaa</span> 3 <span class="line-item--description">bbb</span> 4 ccc 5</div>
###これまでの経緯
DIVのinnerHTMLをJavaScriptの正規表現で解析し、力技でDOMを改造する方法を検討していますが、処理コストが結構大きくなりそうなので、この方向で進めるべきか悩んでいます。
このため、これよりもコストを抑えられそうな、別の方法を探しています。
###補足情報
- このDIVと子要素のセットは、1ページ内に最大で100個存在します。
- "ccc" の部分は半角英数とかなが混在する日本語の文章で、最大300文字あります。
- 「非表示」の意味は「display:none」でも「visibility:hidden」でも構いません。とにかく画面に表示されなければOKです。
- HTML部分は他社が開発したアプリから出力されておりブラックボックスです。このため、DIVと子要素の宣言を書き換えることはできない、という前提でお願いします。
- できるのは、CSSを適用するか、あるいはスクリプト処理(jQuery 1.11.3 が使用可能)によって、ビジュアルを動的に変更することだけです。
- スクリプト処理はNGではありませんが、もしCSSだけで定義できるのであればそのほうが望ましいです。
よろしくお願います。
回答2件
あなたの回答
tips
プレビュー