如何防止DIV标签换行？

Question

我想在浏览器中输出一行文本，其中包含一个div标签。当渲染时，似乎该div会导致出现新行。如何在同一行上包含div标签中的内容 - 这是我的代码。

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

我试图将其整理一下。如何让它显示在同一行上？

- undefined

---

只是想指出，使用echo时不需要括号。echo $id;和echo($id);一样有效。 - User

Answer 1

标签是块级元素，具有相应的行为特性。

您应该使用内联元素 替代它。

如果您真的想要使用

，请添加style="display: inline"。(您也可以将其放在 CSS 规则中)

- SLaks

---

只有 display: inline 与 DIV 的用途相矛盾，所以请不要使用它！请改用 span。 - Robert K

我很清楚这一点，这就是为什么我写了“如果你真的想要”的原因。 - SLaks

在HTML5之前，页面的一个区域被定义为“div”，它没有任何呈现特征。换句话说，根据其包含的内容和元素，基于语义上的定义，“div”是合适的。因此，将“div”设置为“display:inline”是完全可以接受且不违反任何语义或标准定义。 - austin cheney

在我的情况下，我无法使用<span>标签，因为我想定义一个断词换行的属性，而这些属性只适用于块类型元素。但我又不能使用<div>标签，因为我不想要一个新的行。所以，我使用了 display: inline-block 和一个 <div> 元素。不管别人怎么说样式的问题，但这种方法解决了两个问题。 - jsarma

如何为span设置固定宽度 - Aqeel Ashiq

Answer 2

我不是专家，但尝试使用 white-space:nowrap;

所有主流浏览器都支持 white-space 属性。

注意：值 "inherit" 不支持 IE7 及更早版本。IE8 需要使用 。IE9 支持 "inherit"。

- Shivanshu

---

当您在包装元素上使用overflow: hidden并根据父元素“在背景上”移动它时，需要内联块元素不在行末换行时，这非常好 :) - jave.web

这应该是答案。使用 span 标签并不能防止换行，仍然会自动断行。但是如果同时使用 span 和 white-space:nowrap; 样式，则可以避免自动换行。 - SimpleGuy

Answer 3

div 是一个块级元素，它总是占用自己的一整行。

应该使用 span 标签代替。

- cobbal

---

你把呈现和功能混淆了。一个 div 会单独占据一行，仅因为它默认以 display:block 的方式呈现，没有其他原因。 - austin cheney

但是span标签也会在前后创建一个换行符？ - user3761308

Answer 4

将style="display: inline"添加到您的div中。

- Franz

Answer 5

和链接上使用float:left，或者使用span。

- Jimmeh

Answer 6

2022年的晚回答：

如果您正在使用2个div元素，则“white-space: nowrap”不起作用，而是通过“display:flex”将它们包装在一个div中，并使用“flex-wrap：nowrap”（默认启用）来解决问题。

当您在一行中有多个div时，此解决方案可以很好地工作，但在小屏幕设备上响应时，您需要始终将其中2个div放在同一行上。使用“inline”解决方案无法实现这一点（除非使用nowrap）。

div.wrapper-whitespace, div.wrapper-whitespace-with-inline {
  white-space: nowrap;
}

div.wrapper-whitespace-with-inline > div.item {
  display: inline;
}

div.wrapper-flex {
  display: flex;
  flex-wrap: nowrap; /* this is default */
}

div.item {
 border: 1px solid black;
 width: 100px;
}

<div class='item'>div</div>
<div class='item'>div</div>

<br>

<div class='wrapper-whitespace'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-whitespace-with-inline'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

<br>

<div class='wrapper-flex'>
  <div class='item'>div</div>
  <div class='item'>div</div>
</div>

- namgold

Answer 7

更好的换行方式是使用带有CSS样式参数 white-space: nowrap; 的 span 元素。

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在你的HTML中直接使用示例

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>

- Alex. Manfrin

Answer 8

overflow-x: scroll;
width: max-content;

对我很有帮助，希望能帮到其他人。

（使用情况：我有很多连续的 div 元素，但它们会换行，而我想让用户在这种情况下向右滚动）

- Justin

Answer 9

使用CSS属性 - white-space: nowrap;

- Jithjob Ignatious

Answer 10

<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

- dfilkovi

---

只用 CSS 就可以了，使用 JavaScript + PHP 是个糟糕的主意。 - ZurabWeb

@Piero 你为什么这么说？前端应用通常需要一个后端。 - Curious

@Curious，确实如此，但是后端应该处理诸如计算和数据处理之类的后端事务，而前端应该留给浏览器处理。这将减少服务器负载并改善用户体验。这是一般情况。然而，在这种特定情况下，<a href="pagea.php?id=<?php echo $id; ?>">页面A</a>已经足够好了。使用getData.php，为什么要让PHP解析和输出Javascript，如果可以由Apache处理呢？就像这样：src="getData.js?id=<?php echo $id; ?>"。 - ZurabWeb