[英]How do I prevent DIV tag starting a new line?
I want to output a single line of text to the browser that contains a tag.我想向包含标签的浏览器输出一行文本。 When this is rendered it appears that the DIV causes a new line.
当它被渲染时,似乎 DIV 会导致一个新行。 How can I include the content in the div tag on the same line - here is my code.
如何在同一行的 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>
I have tried to tidy it up here.我试着在这里整理一下。 How can I have this display on a single line?
我怎样才能在一行上显示这个显示?
The div
tag is a block element, causing that behavior. div
标签是一个块元素,导致该行为。
You should use a span
element instead, which is inline.您应该使用
span
元素,它是内联的。
If you really want to use div
, add style="display: inline"
.如果您真的想使用
div
,请添加style="display: inline"
。 (You can also put that in a CSS rule) (你也可以把它放在 CSS 规则中)
I am not an expert but try white-space:nowrap;
我不是专家,但请尝试
white-space:nowrap;
The white-space property is supported in all major browsers.所有主流浏览器都支持 white-space 属性。
Note: The value "inherit"
is not supported in IE7 and earlier.注意:IE7 及更早版本不支持值
"inherit"
。 IE8 requires a !DOCTYPE
. IE8 需要一个
!DOCTYPE
。 IE9 supports "inherit"
. IE9 支持
"inherit"
。
div
is a block element, which always takes up its own line. div
是一个块元素,它总是占据自己的行。
use the span
tag instead改用
span
标签
将style="display: inline"
添加到您的 div。
在 div 和链接上使用 float:left,或使用跨度。
A better way to do a break line is using span with CSS style parameter white-space: nowrap;做断线的更好方法是使用带有 CSS 样式参数 white-space: nowrap; 的 span。
span.nobreak {
white-space: nowrap;
}
or
span.nobreak {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Example directly in your HTML直接在您的 HTML 中的示例
<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
使用 css 属性 - white-space: nowrap;
overflow-x: scroll;
width: max-content;
Worked for me, hope this helps someone else.为我工作,希望这对其他人有帮助。
(Use case: I had a lot of divs in a row that were breaking to the next line, but I wanted the user to scroll to the right instead in this case) (用例:我连续有很多 div 中断到下一行,但在这种情况下我希望用户向右滚动)
Late answer in 2022: 2022年迟到的答案:
If you are using 2 div element, white-space: nowrap
won't works, instead wrap them by a div
by display: flex
along with flex-wrap: nowrap
(which is default enabled).如果您使用 2 个 div 元素,则
white-space: nowrap
将不起作用,而是通过display: flex
和flex-wrap: nowrap
(默认启用)将它们包装成一个div
。
This solution work well when you have multiple divs in a row, but you need 2 of them always on the same row when responsive in small screen device.当您连续有多个 div 时,此解决方案效果很好,但在小屏幕设备中响应时,您需要其中 2 个始终位于同一行。
inline
solution can't achieve this (unless with nowrap). 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>
<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>
您可以简单地使用:
#contentInfo_new br {display:none;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.