html pタグの中のaリンク以外を非表示にする

Question

現在WordpressでWebページを作成しております。
投稿記事一覧ページが、現在下記コードのように書かれています。
pタグのなかに文章が書かれており、その下にはリンクであるread moreボタンがあります。

この状態で「ダミー文章」を消し、read moreボタンのみを表示したく、以下のように書いているのですが、うまく非表示になりません。
「.media-body > p 」だけでp要素全部を消すことはできる状態です。

適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

<div class="media-body">
<p>
ダミー文章ダミー文章ダミー文章ダミー文章ダミー文章
<a id="alpr" style="visibility:visible;border: none; text-decoration: none; letter-spacing: 1px;;" href="https://xxx/xxx/xx/xxxxxxxx/">More &gt;</a></p>
</div>

.media-body > p :not(#alpr) {
    display: none;
}

Comments

[Lhankor_Mhy]

CSSでは無理じゃないでしょうか？

Answer 1

この状態で「ダミー文章」を消し、read moreボタンのみを表示したく、以下のように書いているのですが、うまく非表示になりません。

今のCSSで、「タグ直下にあるテキストノード」だけを選択するような方法はありません。素直にやるなら「ダミー文章」部分を別なタグで囲んで、そちらにCSSを掛ける必要があります。

Answer 2

#alprの位置を詰めなくてよいなら、下記で対応可能です。

.media-body > p:not(#alpr) {
    visibility: hidden;
}

ちなみに
p :not(#alpr)という書き方は間違いです。コロンの前にスペースは入れません。

もしダミー文章の位置に#alprを持っていきたいのだったら、positionを利用して表示位置を変更してください。

Answer 3

強引ですが、テキストの場合であればfont-size: 0;などで対応するという手があります。
表示したい部分はfont-sizeを指定し直す必要があります。

https://jsfiddle.net/3kzwjga9/

.media-body > p:not(#alpr) {
  font-size: 0;
}
#alpr {
	font-size: 14px;
}

タグの編集ができるのであれば、maisumakunさんのおっしゃるように別のタグでダミー文章の部分を囲うのがよろしいかと思われます。

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。
返信が遅くなり申し訳ありません。

ご教示いただいたように、「font-size: 0;」を使用してうまく表示するようにいたします。