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>

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>