CSS - Rotated text with overflow ellipsis

Question

I have a text that I need to rotate and truncate if it's too long:

But if I apply ellipsis on it:

overflow: hidden;
text-overflow: ellipsis;

The rotated text will be too short:

.box {
  position: relative;
  width: 300px;
}

.box-header {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  padding: 10px;
  font-weight: bold;
  background: #ccc;
  color: red;
  min-width: 0;
}

.box-header > div {
  transform: rotate(-90deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

.box-content {
  margin-left: 40px;
  padding: 10px;
  background: #eee;
}

.some-content {
  height: 100px;
}

<div class="box">
  <div class="box-header">
    <div>Too long header text</div>
  </div>
  <div class="box-content">
    <div class="some-content">Some content</div>
  </div>
</div>

Answer 1

Consider writing-mode to switch the direction of the text then add height:100% to restrict the height and allow the ellipsis to work. Finally add a 180deg rotation to have the text like you want:

.box {
  position: relative;
  width: 300px;
}

.box-header {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  padding: 10px;
  font-weight: bold;
  background: #ccc;
  color: red;
  min-width: 0;
}

.box-header > div {
  writing-mode:vertical-lr;
  transform:rotate(180deg);
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

.box-content {
  margin-left: 40px;
  padding: 10px;
  background: #eee;
}

.some-content {
  height: 100px;
}

<div class="box">
  <div class="box-header">
    <div>Too long header text</div>
  </div>
  <div class="box-content">
    <div class="some-content">Some content</div>
  </div>
</div>

---

The issue with your code is that the rotation will only do a visual transformation and will not really change the direction of the text. The ellipsis/overflow will consider the code as if there is no rotation.

.box {
  position: relative;
  width: 300px;
}

.box-header {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  padding: 10px;
  font-weight: bold;
  background: #ccc;
  color: red;
  min-width: 0;
}

.box-header > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

.box-content {
  margin-left: 40px;
  padding: 10px;
  background: #eee;
}

.some-content {
  height: 100px;
}

<div class="box">
  <div class="box-header">
    <div>Too long header text</div>
  </div>
  <div class="box-content">
    <div class="some-content">Some content</div>
  </div>
</div>