gpt4 book ai didi

html - 对于长内容,内联 block 无法按预期工作?

转载 作者:行者123 更新时间:2023-11-28 13:23:51 25 4
gpt4 key购买 nike

我有两个想要内联的 div(一个在左边,一个在右边)。右边的包含一行文本。我希望它始终是一行文本,并在必要时省略。我一定没有正确地进行内联,因为当我的文本太长时,右边的 div 会跳到左边的下面。示例:

<!doctype>
<html>

<head>
<style type="text/css">
#panelLeft {
display: inline-block;
width: 50px;
height: 20px;
background-color: #f00;
}
#panelRight {
display: inline-block;
background-color: #0f0;
/* width: 200px; */ works ok if explicitly sized
}
#test {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>

<body>
<div id="panelLeft">
</div>
<div id="panelRight">
<div id="test">
This is some text that's longer than usual and that I'd like to have ellipsized, and forced to a single line, always.
</div>
</div>
</body>
</html>

http://jsfiddle.net/JEQPL/1/

如果我改为为 panelRight 指定宽度(等于或小于剩余空间),则我的 div 位于同一行,并且椭圆化显示正确。当我不知道 panelRight 的确切宽度时,我该如何让它工作?

谢谢

最佳答案

我会考虑 float 左列并调整右列边距以弥补左列所需的空间,而不是内联 block 。

这是我通常使用的技术的 fiddle :http://jsfiddle.net/q3rEX/

HTML:

<div class="left">Left Bar</div>
<div class="right">There is a bunch of text in here and I don't want it to jump down a line cause that stinks!</div>

还有 CSS:

.left { float: left; width: 25%; background: red; }
.right { margin-left: 25%; background: green; }

然后您可以将防止文本换行、省略号等应用到 .right 以使其拨入。

这还有一些好处,因为某些旧版浏览器不支持内联 block 。

关于html - 对于长内容,内联 block 无法按预期工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14665952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com