如何通过CSS禁用<div>标签内的<br>标签？

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文件。 当然，我知道禁用它的方法。

我想知道如何在div样式中添加br { display: none; }，如果可能的话。

解决方案：

1. 不能仅删除<p>标签而不删除其中的内容。
2. 不能直接通过div样式隐藏<br>，所以我是这样做的:

<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/

- Polo Pakina

---

只需移除标签即可；你希望CSS对此做些什么？这个问题毫无意义... - dsgriffin

“messing my css”并不是一个有效的问题。具体问题是什么？ - George

@bottleboot 不，他不需要jquery。如果你认为他会需要，请给出你的理由。 - Denys Séguret

而且在<p>标签后面永远不应该有<br />，你可以通过在CSS中将margin-bottom:10px应用于<p>标签来获得所需的间距。 - rorypicko

@NathanLee 他希望标签内的内容仍然可见。 - dsgriffin

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

- Tim

---

如果你想要移除<br>标签，可以使用display:none。 - Denys Séguret

True。http://jsfiddle.net/zG9Ax/1/ 代码稍微多一些，但是这里只是指出了一个可能的方向。 - Tim

Answer 2

我使用了这个方法，它的效果是去除了换行并将其展示为单词间的空格。我认为这更符合您的需求。

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

- David Beauchamp

---

有趣的是，content 属性对 display: inline; 起作用是必须的。你是怎么发现它的呢？你有什么想法为什么会这样？ - David Mulder

您可以省略content属性，但是接下来的单词会与前面的单词紧贴在一起。使用display:inline的content:''属性类似于不间断空格。 - David Beauchamp

你好，David。我使用了这个有前途的答案，但不幸的是，在Firefox（100.0b5（64位））和Safari（版本15.4（17613.1.17.1.13））上无法正常工作。 - Halil Kayer

Answer 3

或者隐藏在p标签后面的任何br，这些br显然是不需要的

p + br {
    display: none;
}

- 2046

Answer 4

您可以使用display:contents，但是要避免无障碍问题，只在br标签上应用它：

br {
  display:contents;
}

[display:contents;] 大多数浏览器将从可访问性树中删除显示值为 contents 的任何元素。这些元素将不再被屏幕阅读技术宣读。请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/display。

- Mkdgs

Answer 5

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

Remove <br> effect using CSS.

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

- nirali

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:contents，则某些元素将呈现为display:none：

- Halil Kayer

Answer 7

我看到有人评论说只需从html中删除，但如果你想仅在特定类型的@ media屏幕上删除它，则可以采用以下方式：

div br {
  display: none;
}

- mateus_cesar

---

这不是有效的HTML或CSS。 - TylerH

怎么样？我将它应用到我的CSS中，它起作用了。 - mateus_cesar

CSS没有“嵌套选择器”功能（除了媒体查询或动画关键帧步骤）。我猜你正在使用像Sass或Less这样的预处理器，在编译成CSS之前没有考虑到它（在CSS中，它将编译为类似于div br { display: none; }的东西）。 - TylerH

哦，我明白你的意思了。是的，我正在使用预处理器。感谢提供信息。我会删除我的评论。 - mateus_cesar

这实际上是一个不错的想法。 - Weilory

Answer 8

我是这样使用它的：

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

注意：通过Foundation进行媒体查询 注意2：如果编辑之一打算在他/她的副本中使用
标签，并且您需要在某些条件下特别处理它——例如在移动设备上。

- jrgd