如何禁用<br>里面的標簽<div>通過CSS？

Question

<br>不會讓我在內聯顯示 3 個按鈕，所以我需要在 div 內禁用它，我不能只是刪除它們，它們會自動存在。

我有：

<div style="display:block">
    <p>Some text</p>
    <br>
    <p>Some text</p>
    <br>
</div>

而且我要：

<div style="display:block">
    Some text Some text
</div>

更多信息

我不想擁有 mystyle.css 文件。 我當然知道禁用它的方法。

我問如何將這個br { display: none; }添加到 div 樣式中。 br { display: none; }如果可能的話。

解決方案：

1. 如果不刪除里面的內容，就不可能只刪除<p>標簽。
2. <br>直接用 div 樣式隱藏是不可能的，所以我是這樣做的：

 <style type="text/css"> .mydiv { display: block; width: 100%; height: 10px; } .mydiv br { display: none; } </style> <div class="mydiv"> Some text Some text </div>

http://jsfiddle.net/cGT4E/

Answer 1

你可以改變你的 CSS 來讓它們不那么突兀，例如

div p,
div br {
    display: inline;
}

http://jsfiddle.net/zG9Ax/

或 - 正如我的評論者指出的那樣：

div br {
    display: none;
}

但是然后為了實現你想要的例子，你需要修剪p ，所以：

div br {
    display: none;
}
div p {
    padding: 0;
    margin: 0;
}

http://jsfiddle.net/zG9Ax/1

Answer 2

或者隱藏 p 標簽后面的任何 br，這顯然是不需要的

p + br {
    display: none;
}

Answer 3

我使用了它，它具有刪除換行符並將其顯示為單詞之間的空格的效果。 我認為這更接近您要尋找的內容。

br {
  display: inline;
  content: ' ';
  padding: 0 3px;
}

Answer 4

<p style="color:black">Shop our collection of beautiful women's <br> <span> wedding ring in classic &amp; modern design.</span></p>

使用 CSS 移除<br>效果。

<style> p br{ display:none; } </style>

Answer 5

我是這樣用的：

@media (max-width: 450px) {
  br {
    display: none;
  }
}

nb：通過 Foundation 進行媒體查詢 nb2：如果其中一位編輯打算使用，這很有用
他/她的副本中的標簽，您需要在某些條件下專門處理它 - 例如在移動設備上。

Answer 6

我遇到了同樣的問題並通過display: contents

這是演示：

 .wrapper { background: #EEE; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; } .wrapper * { display:contents; }

 <div class="wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br/> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/> Pretium lectus quam id leo in vitae turpis massa sed. Lorem ipsum dolor sit amet consectetur adipiscing elit.<br/> Sagittis id consectetur purus ut faucibus pulvinar elementum. Netus et malesuada fames ac turpis egestas sed.<br/> Eget duis at tellus at. </p> <p> Faucibus vitae aliquet nec ullamcorper sit amet risus. Tortor condimentum lacinia quis vel eros donec ac.<br/> Tellus in hac habitasse platea dictumst vestibulum. Aliquam id diam maecenas ultricies. Tortor id aliquet lectus proin nibh nisl condimentum id.<br/> Sed enim ut sem viverra. <br/> Morbi tristique senectus et netus et. </p> </div>

所以根據 MDN，

這些元素本身不會產生特定的盒子。 它們被它們的偽盒子和它們的子盒子所取代。

是什么讓它值得，（再次取自 MDN）

請注意，CSS Display Level 3 規范定義了內容值應如何影響“異常元素”

這里CSS Display Level 3 規范說，某些元素被渲染為display: none如果display:contents適用於它們：

<br> <wbr> <meter> <progress> <canvas> <embed> <object> <audio> <iframe> <img> <video> <frame> <frameset> <input> <textarea> <select>

display: contents計算為display: none 。

（來源： https ://drafts.c​​sswg.org/css-display/#unbox）

Answer 7

您可以使用display:contents ，但要避免可訪問性問題，僅將其應用於br標簽：

br {
  display:contents;
}

見https://developer.mozilla.org/en-US/docs/Web/CSS/display-box

[display:contents;] 大多數瀏覽器將從可訪問性樹中刪除任何顯示值為 content 的元素。 [...] 不再被屏幕閱讀技術宣布。

Answer 8

我看到人們評論只是為了從 html 中刪除，但如果您只想從某些類型的 @media 屏幕中刪除它，那么這就是要走的路：

div br {
  display: none;
}