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

使用Site 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>。

剃刀视图中的垂直文本

1 个答案: