表垂直文本和文本溢出的龙头

我在这里搜索这个问题，并感谢一些人，我发现我想要的，文本。到目前为止，这种技术在horisontal文本表垂直文本和文本溢出的龙头

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

工作的伟大，但在这里是行不通的我怎么想它。文本需要被隐藏的点做到底，如果你知道我的意思

.container { 
 
\t width: 1058px; 
 
\t margin: 100px auto; 
 
} 
 
.table-frame table { 
 
\t width: 100%; 
 
\t font-size: 12px; 
 
} 
 
.table-frame table, 
 
.table-frame th, 
 
.table-frame td { 
 
\t border: 1px solid #010101; 
 
\t border-collapse: collapse; 
 
\t text-align: center; 
 
\t padding: 5px; 
 
\t vertical-align: bottom; 
 
} 
 
.table-frame thead { 
 
\t background-color: #AAA; 
 
} 
 
.sector td { 
 
\t vertical-align: top; 
 
} 
 
.sector th, 
 
.sector td { 
 
\t text-align: left; 
 
\t 
 
} 
 
.sector thead tr { 
 
\t height: 150px; 
 
} 
 
.sector thead tr th:first-child { 
 
\t width: 150px; 
 
\t 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; 
 
}

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

来源

2015-07-13 Stefan

嘿，你可以告诉我们演示与jsfiddle ..？ –

@HimeshAadeshara第二个代码是演示，但[这里]（https://jsfiddle.net/9da6ya2g/）它是。文字是不可见的，因为溢出，但它没有点，这就是我想要的 – Stefan

如果你可以用固定尺寸给文字溢出属性：

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

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

来源

2015-07-13 08:09:37 Alessio

是的，我可以，是的，我也试过你在这里做什么，但在错误的元素：D谢谢你兄弟;） – Stefan

@soullighter我很高兴帮助你！ ;） – Alessio

表垂直文本和文本溢出的龙头

回答

相关问题