DIVの一部分だけ非表示にする方法

Question

###前提・実現したいこと
DIVのテキストの一部分だけを非表示にしたいのですが、CSSでの指定方法が判りません。ご存知の方がいらっしゃれば、教えていただけないでしょうか。
具体的には、下記のように宣言されているDIVがあり、この子要素と値のうち、 "ccc" の部分だけを非表示にしたいのです。

###ソースコード

<div class="line-item">
  <span class="line-item--heading">aaa</span>
  <span class="line-item--description">bbb</span>
  ccc
</div> 

###これまでの経緯
DIVのinnerHTMLをJavaScriptの正規表現で解析し、力技でDOMを改造する方法を検討していますが、処理コストが結構大きくなりそうなので、この方向で進めるべきか悩んでいます。
このため、これよりもコストを抑えられそうな、別の方法を探しています。

###補足情報

• このDIVと子要素のセットは、1ページ内に最大で100個存在します。
• "ccc" の部分は半角英数とかなが混在する日本語の文章で、最大300文字あります。
• 「非表示」の意味は「display:none」でも「visibility:hidden」でも構いません。とにかく画面に表示されなければOKです。
• HTML部分は他社が開発したアプリから出力されておりブラックボックスです。このため、DIVと子要素の宣言を書き換えることはできない、という前提でお願いします。
• できるのは、CSSを適用するか、あるいはスクリプト処理（jQuery 1.11.3 が使用可能）によって、ビジュアルを動的に変更することだけです。
• スクリプト処理はNGではありませんが、もしCSSだけで定義できるのであればそのほうが望ましいです。

よろしくお願います。

Comments

[kei344]

.line-item--descriptionの最後の「"」が抜けています。

[kei344]

すいません、見間違いだったようです。

Answer 1

.line-item {
  font-size: 0;
}
.line-item * {
  font-size: 12px;
}

あんまりと言えばあんまりですが、
こんな対応はどうでしょう？

Comments

[tkanda]

おお、確かに希望通りの表示になりますね！

font-size: 0 という指定は、これまで考え着きませんでした。とても、参考になります。

[tkanda]

今回、こちらの回答をヒントに進めさせていただくことになりました。ありがとうございました。

Answer 2

CSSはあとに書いたものが優先されますので、以下でどうでしょうか。

.line-item {
    visibility: hidden;
}

.line-item--heading, .line-item--description {
    visibility: visible;
}

cccの部分を表すタグ付がされていないので、その部分を直接指定することはできないと思います。

Comments

[tkanda]

なるほど、これもシンプルな解決策になりますね。それと "ccc" 部分だけを指定するセレクタ表記は、やはり無いんですね。参考になりました。
今回は、miyabi-sunさんの回答をヒントにして進めさせていただくことになりましたので、そちらをベストアンサーにさせていただきました。ありがとうございました。