我正在尝试将一些文本和 div 全部放入一行(不换行)并使用 text-overflow: ellipsis。然而，在我所有的实验中(我什至不记得我尝试过的所有事情)，文本填满了整行，而 div 被推到新的一行。
我希望截断文本，以便蓝色框与文本位于同一行。
我能够让它与 JS 一起工作，但我想要一个纯 CSS 解决方案。
编辑:
抱歉，我应该添加更多详细信息。
- 文本长度可变
- 该解决方案应允许响应式页面设计(我将
width: 400px用于约束容器，但实际上它是响应式的，抱歉，我知道我的问题具有误导性。)
.page-container{
width: 400px;
background: yellow;
}
div.header {
white-space: nowrap;
display: inline;
width: 100%;
}
div.one-line-div {
font-size: larger;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
}
.move-divs {
display: inline-block;
float: right;
}
.div1, .div2, .div3, .div4 {
float: right;
margin-right: 12px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 30px;
background: blue;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">Text text, so much text here, what do we do with all this text?.
<div class="more-divs">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>最佳答案
你试过 flex 盒子吗？根据我测试过的内容，它应该适合您。不过，您需要将文本包装在另一个 div 中。并且还需要将一些东西从 inline-block 改回 block，等等。基本上 flex-box 是新的布局引擎，它允许你做一些很棒的事情。一般来说，如果你使用 flex-box，你不应该需要 float 。查看this guide在 CSS-Tricks 的 flex-box 上。你可以用它做一些了不起的事情。如果您对我的回答有任何疑问，请告诉我。我不想讨论太多细节，因为那将是一个相当大的兔子洞。
.page-container{
width: 400px;
background: yellow;
}
/*
You don't need this anymore with flex.
div.header {
white-space: nowrap;
display: inline;
width: 100%;
}*/
/* Updated to use flex box. */
div.one-line-div {
display: flex;
flex-direction: row;
font-size: larger;
}
/* define the style for our .text element */
.text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* our .move-divs needs to be flex too */
.more-divs {
display: flex;
flex-direction: row;
}
/* I removed the floats and display inline, since you don't need them */
.div1, .div2, .div3, .div4 {
margin-right: 12px;
cursor: pointer;
width: 30px;
height: 30px;
background: blue;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">
<div class="text">
Text text, so much text here, what do we do with all this text?.
</div>
<div class="more-divs">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>关于html - CSS 在使用文本溢出时阻止 DIV 换行 : ellipsis，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59807245/