防止使用CSS包装浮动的span元素

Question

I have a span inside an <h3> that is wrapping to the next line once the text gets too long. I need the description text to all stay on the first line with the .title and overflow:hidden . The description should align right, the title should align left.

This design pattern is used throughout the application, so changing the html elements themselves is a last resort. I'd like to solve this with a simple CSS solution if possible. I've been trying every combination of overflow , text-overflow , and white-space that I can think of with no luck. Thanks!

JSFiddle

 .title { background-color: lightblue; color: green; } .description { float: right; font-weight: bold; color: black; } 

 Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div> 

Answer 1

You can set .title to white-space:nowrap + display:table .

.title {
  white-space: nowrap;
  display: table;
}

 .title { background-color: lightblue; color: green; white-space: nowrap; display: table; } .description { font-weight: bold; color: black; } 

 Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div> 

---

Edit 1: if you want to hide the extra text, you can use white-space:nowrap + overflow:hidden .

 .title { background-color: lightblue; color: green; white-space: nowrap; overflow: hidden; } .description { font-weight: bold; color: black; } 

 Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div> 

---

Edit 2: if you need the short text to expand and match the long text with no hidden text, you can use white-space:nowrap + display:table-row . Note, need to adjust the markup slightly - combine the two containers into one.

 .title { background-color: lightblue; color: green; white-space: nowrap; display: table-row; } .description { font-weight: bold; color: black; } 

 <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> <h3 class="title"> title <span class="description">description</span> </h3> </div> 

Answer 2

overflow: hidden; will only work if the div has a set width. You can set a width on the div to be 100vw or a set px amount and then you can use your white-space: nowrap; and 'overflow: hidden;` together.

.title {
  background-color: lightblue;
  color: green;
  width: 100vw;
  overflow: hidden;
  white-space: nowrap;
}

.description {
  font-weight: bold;
  color: black;
}

Answer 3

Pangloss put me on the right track, here is the CSS that ended up working for me.

.description {
  text-align: right;
  width:100%;
  overflow:hidden;
  font-weight: bold;
  color:black;
}
.container {

}
.title {
  background-color:lightblue;
  color:green;
  display:flex;
  white-space:nowrap;
}