CSS text overflow ellipsis with multiple elements

Question

Here is what I want to do:

Keep some text and a button at the same line and align center
When reduce the screen size, always keep the button showing up while text-overflow: ellipsis taking effect

What I did so far can't keep the button showing up. Ellipsis only starts working when the window edge reaches the text.

HTML:

<div class="wrapper">
  <span>
    foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar 
  </span>
  <button type="button">Download</button>
</div>

CSS:

.wrapper {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #b3ffcb;
}

JSFiddle Demo

Anyone know how to fix this?

I made a fiddle for you: jsfiddle.net/y7404myo/1, hope it helps! — Teuta Koraqi
– Teuta Koraqi, Commented Jun 13, 2016 at 18:57

Nenad Vracar · Accepted Answer · 2016-06-13 18:59:03Z

4

You can use Flexbox on wrapper and apply text-overflow: ellipsis on span Fiddle

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b3ffcb;
}
span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <span>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </span>
  <button type="button">Download</button>
</div>

answered Jun 13, 2016 at 18:59

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Li' Over a year ago

When I continually reduce the screen, the button size somehow got reduced gradually too. What is this happening?

Nenad Vracar Over a year ago

@Li' I can't see that in my demo, can you create fiddle and show what you mean by that?

Li' Over a year ago

Nvm, I added button min-width to fix button size issue. Flexbox is what I need to solve my problem. Thx!

Collectives™ on Stack Overflow

CSS text overflow ellipsis with multiple elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related