CSS-带有省略号的旋转文本

Question

如果文本太长，我需要旋转和截断文本：

但是，如果我在上面加上省略号：

overflow: hidden;
text-overflow: ellipsis;

旋转后的文字将太短：

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;
}

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>