How to truncate button text while it is between spans and all is inside parent span?

user_14157272 0
Viewed 386

I've got span inside parent div, which inside has structure in order: span, button, span.

My goal is that span fits parent div, keep in the same line (does not wrap), truncate text inside span and button and not change the html structure.

Below is code snippet, in which the span with its content fits the parent div width. The problem is with button text, which does not truncate. When the width is not enough, the button just dissapears. Nevertheless, when it stands alone, it truncates as it should.

enter image description here

.box {
  border: 3px solid red;
  outline: 3px solid rosybrown;
  padding: 10px;
  display: inline-block;
  width: 200px;
}

.header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  width: 100%;
  margin: 0 0 20px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inside-box {
  border: 2px solid blue;
  display: block;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-2 {
  flex-direction: row;
  margin: 5px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
}
<div class="box">
  <div>
    <h3 class="header">Content Header Name</h3>
  </div>
  <div>
    <button class="btn">Click me click me click me click me click me!</button>
  </div>

  <span class="inside-box">
  <span>Before Text</span>
  <button class="btn-2">Click me!</button>
  <span>After Text</span>
  </span>
</div>

Example on stackblitz

css html
1 Answers

If I'm understanding right, you just want all the nested elements (span, button) to each ellipsis on overflow? See example below. Also, cheers for actually putting your example in the snippet editor and even providing a stackblitz!

.box {
  border: 3px solid red;
  outline: 3px solid rosybrown;
  padding: 10px;
  display: inline-block;
  width: 200px;
}

.header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  width: 100%;
  margin: 0 0 20px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inside-box {
  display: flex;
  align-items: flex-start;
  border: 2px solid blue;
  padding: 10px;  
}

.inside-box * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-2 {
  margin: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="box">
  <div>
    <h3 class="header">Content Header Name</h3>
  </div>
  <div>
    <button class="btn">Click me click me click me click me click me!</button>
  </div>

  <span class="inside-box">
  <span>Before Text</span>
  <button class="btn-2">Click me!</button>
  <span>After Text</span>
  </span>
</div>

user_10902060
Related