Question

我在这里搜索这个问题，感谢有些人，我找到了我想要的东西，但是，还有一件事我想做，那就是垂直文字上的文字溢出。到目前为止，这种技术在水平文本上运行良好

＆＃13;

td {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

但是这里的工作方式不会让我感觉如何。如果你知道我的意思，那么文字需要用点来隐藏。

＆＃13;

.container {
	width: 1058px;
	margin: 100px auto;
}
.table-frame table {
	width: 100%;
	font-size: 12px;
}
.table-frame table,
.table-frame th,
.table-frame td {
	border: 1px solid #010101;
	border-collapse: collapse;
	text-align: center;
	padding: 5px;
	vertical-align: bottom;
}
.table-frame thead {
	background-color: #AAA;
}
.sector td {
	vertical-align: top;
}
.sector th,
.sector td {
	text-align: left;
	
}
.sector thead tr {
	height: 150px;
}
.sector thead tr th:first-child {
	width: 150px;
	white-space: nowrap;
}
.sector th.rotate {
  height: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sector th.rotate > div {
  transform: rotate(270deg);
  width: 1px;
}

＆＃13;

<body>
  <div class="container">
    <div class="table-frame sector">
      <table>
        <thead>
          <tr>
            <th>Some text some text some text</th>
            <th class="rotate"><div><span>Column header 1 text need to be hidden with dots</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
            <th class="rotate"><div><span>Column header 1</span></div></th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</body>

＆＃13;

Answer 1

如果您可以使用固定尺寸，请提供文本溢出属性：

 white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 130px;

这是一个工作小提琴： https://jsfiddle.net/kLzg7gr3/1/

使用垂直文本和文本溢出表格

1 个答案: