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>

您的代码存在的问题是旋转只会进行视觉转换，并不会真正改变文本的方向。 ellipsis/overflow 会将代码视为没有旋转。

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

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

CSS - Rotated text with overflow ellipsis

html

ellipsis

css-transforms