Html Razor视图中的垂直文本

我有以下看法：

@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;    
    height: 275px;
}

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

---

给你。我还设置了表格的

border=“1”

以便您可以在示例中看到效果，并使用

而不是

您需要将
旋转的高度设置为所有文本都适合的高度

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

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

给你。我还设置了表的
border=“1”
以便您可以在示例中看到效果，并使用
而不是
，听起来您需要
.row>h2{margin top:50px}
，或者类似的东西。@obsimanage这需要在CSS中的什么地方。这将使表格在页面上进一步向下移动，以便
装载和卸载
不会与标题重叠：）偏移量当然可以更改。可能还可以使用
word wrap
来覆盖很长的标题，但是您可能需要显示HTML输出，而不是Razor，以便准确地确定应该如何实现。谢谢，这已经排序了，但是如果我再次添加另一个更长的类别，我必须调整页边空白，你不能（轻松地）根据一个元素的长度来调整另一个元素的边距。最好的办法是使用
wordwrap:break-word与同一元素上的设置宽度组合。从您的代码中，这看起来像是类型（2）的
trtd:nth
，但很难判断，因为您发布的是Razor代码而不是HTML，并且没有任何类名。我建议使用类名（特别是对于技能行），并直接针对它：）听起来您需要
.row>h2{margin top:50px}
，或者类似的东西。@obsidiange这需要在CSS中的什么位置？…在CSS中。这将使表格在页面上进一步向下移动，以便
装载和卸载
不会与标题重叠：）偏移量当然可以更改。可能还可以使用
word wrap
来覆盖很长的标题，但是您可能需要显示HTML输出，而不是Razor，以便准确地确定应该如何实现。谢谢，这已经排序了，但是如果我再次添加另一个更长的类别，我必须调整页边空白，你不能（轻松地）根据一个元素的长度来调整另一个元素的边距。最好的办法是使用
wordwrap:break-word与同一元素上的设置宽度组合。从您的代码中，这看起来像是类型（2）的
trtd:nth
，但很难判断，因为您发布的是Razor代码而不是HTML，并且没有任何类名。我建议使用类名（特别是对于技能行），并直接针对它：）是否有任何方法可以使此动态化，因此如果名称较长，则间距保持不变？是的，如果列是动态的，并且您事先不知道它们的长度，您可以编写一些JavaScript来计算旋转高度应该是多少，并将该值推送到
元素上的样式中。是否有任何方法可以使此动态化，以便在名称较长时，间距保持不变？是的，如果列是动态的，并且您事先不知道它们的长度，您可以编写一些JavaScript来计算旋转高度应该是多少，并将该值推送到
元素的样式中。