CSS - 使用溢出省略号的旋转文本

Question

我有一段需要旋转和截断的文本：

但是如果我在它上面应用省略号：

overflow: hidden;
text-overflow: ellipsis;

旋转的文本会变得太短：

.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>

- Koralek M.

Answer 1

考虑使用writing-mode来切换文本方向，然后添加height:100%来限制高度并允许省略号起作用。最后添加180deg旋转，使文本符合您的要求：

.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>

---

你的代码问题在于旋转只会进行视觉变换，而不会真正改变文本方向。省略号/溢出会认为代码没有旋转。

.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>

- Temani Afif

---

但是如果需要特定的角度转换呢？不仅仅是垂直方向（90度），比如说45度。 - Amir Mahdi Nassiri