Have you tried flex-box? Based on what I’ve tested it should work for you. You’ll need to wrap your text in another div, though. And also need to change some things from inline-block back to block, etc. Basically flex-box is the new layout engine that allows you to do some awesome stuff. Generally you shouldn’t ever need float if you use flex-box. Check out this guide on flex-box from CSS-Tricks. You can do some amazing things with it. Let me know if you have any questions regarding my answer. I didn’t want to go into too much specifics because that’d be a pretty big rabbit hole.
.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>
The solution: put the text in a “span” element . then do the following styles
.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;
}
.myText {
max-width: 55%;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.more-divs {
display: inline-block
}
<div class="page">
<div class="page-container">
<div class="header">
<div class="one-line-div">
<span class="myText">Text text, so much text here, what do we do with all this
text?.</span>
<div class="more-divs"">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</div>
</div>
</div>
It is easy and best using flex or grid , though here using float as you said.
When using float this display:inline-block is not needed because float it self makes elements display inline
.page{
background: yellow;
}
.page-container{
width: 400px;
}
div.header {
white-space: nowrap;
width: 100%;
}
div.one-line-div {
font-size: larger;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
float: left;
}
.move-divs {
float: right;
}
.div1, .div2, .div3, .div4 {
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>
<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>
I’m trying to fit some text and divs all into a single line (without wrapping) and using text-overflow: ellipsis. However in all my experimenting (I can’t even recall all the things I’ve tried), the text fills up the entire line, and the divs get pushed down onto a new line.
I’d like the text to truncate so the blue boxes are on the same line as the text.
I’m able to get it to work with JS, but I want a pure CSS solution.
EDIT:
Sorry, I should have added some more details.
- The text length is variable
- The solution should allow for a responsive page design (I put the
width: 400px to constrain the container, but in reality it’s responsive, sorry I know my question was misleading.)
.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>
hmmm. the rest of the page is actually using flexbox, so it would make sense to try it here too… Let me try to get this implemented on the actual code, and see where that takes me!
@dangel Thats exactly the solution to your problem. Glad you got it sorted.
I should have included in my original question, that the solution should allow for a responsive design and variable length text.
