竖排文字

Question

我有以下看法：

@model YFA.ViewModels.YoungFFSkillVM 
@{ 
    ViewBag.Title = "Training for Drill"; 
} 
<div class="row"> 
    <h2>Training for Drill on @Html.DisplayFor(model => model.DrillDate)</h2> 
</div> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    @Html.HiddenFor(m => m.DrillId) 
    <div class="form-group"> 
     <table> 
      <thead> 
       <tr> 
        <th></th> 
        @foreach (var skill in Model.SkillList) 
        { 
         <th class="rotate"><span class="intact">@skill</span></th> 
        } 
       </tr> 
      </thead> 
      <tbody> 
       @for (int i = 0; i < Model.YoungFFs.Count; i++) 
       { 
        <tr> 
         <td> 
          @Html.HiddenFor(m => m.YoungFFs[i].ID) 
          @Html.HiddenFor(m => m.YoungFFs[i].Name) 
          @Html.DisplayFor(m => m.YoungFFs[i].Name) 
         </td> 
         @for (int j = 0; j < Model.YoungFFs[i].Skills.Count; j++) 
         { 
          <td> 
           @Html.HiddenFor(m => Model.YoungFFs[i].Skills[j].ID) 
           @Html.HiddenFor(m => Model.YoungFFs[i].Skills[j].YoungFFId) 
           @Html.CheckBoxFor(m => Model.YoungFFs[i].Skills[j].IsSelected) 
          </td> 
         } 
        </tr> 
       } 
      </tbody> 
     </table> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-1 col-md-10"> 
      <input type="submit" value="Save" class="btn btn-default" /> 
     </div> 
    </div> 
} 

随着网站的CSS如下：

th.rotate { 
    white-space: nowrap; 
    -webkit-transform-origin: 65px 60px; 
    -moz-transform-origin: 65px 60px; 
    -o-transform-origin: 65px 60px; 
    -ms-transform-origin: 65px 60px; 
    transform-origin: 65px 60px; 

    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
    /*display:inline-block;*/ 
    /*height:30px;*/ 
    /*float:left;*/ 
    /*width:30px;*/ 
} 

span.intact { 
    display:inline-block; 
    width:30px; 
    height:150px; 
} 

但是我得到显示以下观点：

名称被故意删除。

正如你所看到的那样，垂直排列的最上面的行可以被切掉，也可以在标题上看到。

如何调整视图或CSS来阻止它？

Answer 1

您需要的th.rotate设置高度为所有的东西文本将适合。

th.rotate { 
    white-space: nowrap;  
    height: 275px; 
} 

th.rotate > .intact { 
    transform-origin: 65px 60px; 
    transform: rotate(270deg); 
    width: 30px; 
} 

这里的a working Bootstrap sample。我还设置了表border="1"，以便您可以在样本中看到效果，并使用<div>而不是<span>。