我有两个想要内联的 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>
如果我改为为 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/