CODEWITHSUNDEEP
htmlcss
Li'
Li'

Reputation: 3183

CSS text overflow ellipsis with multiple elements

Here is what I want to do:

  1. Keep some text and a button at the same line and align center
  2. 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?

Upvotes: 3

Views: 1910

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 4

Related Questions