只显示一个段落......无论是否有更多,有空白,有空格,有类...只有css

时间:2018-02-02 10:10:38

标签: javascript html css

我正在寻找css属性来隐藏带或不带css类的段落,如果它包含white-space()或空白,但想要至少保留一个段落,如果还有更多段落。

隐藏段落,如果它是空白的或包含white-space(),最好只有css ...如果没有其他选项那么只有JavaScript / jquery

// Ideally I don't want to use javascript/jquery

$("p").html(function(i, html) {
                  return html.replace(/ /g, '');
                });
        p:nth-child(n+2):empty,
        p:nth-child(n+2):blank,
        .MsoNormal p:nth-child(n+2):empty,
        .MsoNormal p:nth-child(n+2):blank {
        margin: 0 0 0px;
        display: none;
        }

        p::before {
        content: ' ';
        }

        p:empty::before {
        content: '';
        display: none;
        }

        p:first-child:empty+p:not(:empty)::before {
        content: '';
        }

        p:first-child:empty+p:empty+p:not(:empty)::before {
        content: '';
        }

        p::after {
        content: '';
        display: none;
        p:empty::after {
        display: none;
        }
        p:first-child:empty+p:not(:empty)::after {
        content: '';
        }
        p:first-child:empty+p:empty+p:not(:empty)::after {
        content: '';
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> some text - 1 </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div> some text - 2 </div>
    <p>&nbsp;</p>

    <div> some text - 3 </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp; &nbsp; &nbsp; </p>
    <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>
    <p>&nbsp;</p>
    <div> some text - 4 </div>
    <p>&nbsp; &nbsp; &nbsp;</p>
    <p>&nbsp;</p>
    <div> some text - 5 </div>
    <p></p>
    <p></p>
    <div> some text - 6 </div>
    <p class="MsoNormal"></p>
    <p></p>
    

    <b>So above html, I would like to display:</b>

    <div> some text - 1 </div>
    <p>&nbsp;</p>
    <div> some text - 2 </div>
    <p>&nbsp;</p>
    <div> some text - 3 </div>
    <p>&nbsp;</p>
     <div> some text - 4 </div>
    <p>&nbsp; &nbsp; &nbsp;</p>
    <div> some text - 5 </div>

所以,我试图通过伪类和&amp;伪元素,但没有运气。 (注意 - 我有jQuery在这里工作,但最好不要使用它。)

1 个答案:

答案 0 :(得分:1)

据我所知,你不能只用CSS做这件事。

使用jQuery是最简单,最干净的方法。我不明白为什么你有jQuery,但你不想使用它,但用纯粹的js这样做更多&#34;丑陋&#34;为了我。虽然我给你2段代码。

JS代码:

// get the elements and transform from HTMLCollection object to array
var array_p = document.getElementsByTagName("P");
array_p = Array.prototype.slice.call(array_p);

array_p.forEach(function(value, index) {
    var text = value.innerHTML;
    text = text.replace(new RegExp('&nbsp;', 'g'), '');
    text = text.replace(new RegExp(' ', 'g'), '');
    value.style.display = "none";
});

如果您想使用它,我会添加一个jQuery代码:

$.each($("p"), function(index, value) {
    var text = $(this).html();  
    text = text.replace(new RegExp('&nbsp;', 'g'), '');
    text = text.replace(new RegExp(' ', 'g'), '');
    if (text.length == 0) {
        $(this).css("display", "none");
    }

})