gpt4 book ai didi

html - 如何将格式化文本包装在响应式表格中?

转载 作者:太空宇宙 更新时间:2023-11-04 00:42:42 24 4
gpt4 key购买 nike

我的 MVC 应用程序具有从我们的数据库中检索值并将它们添加到要在页面上显示的模型的服务方法。标准的东西。在这里,我按类型列出了步骤及其描述。为了对此进行测试,我刚刚放入了一些标准的 Lorem Ipsum 文本,这样我就可以看到一些东西。

我不是最擅长前端的,所以我有点摸不着头脑。现在,我的数据样式非常简单,如下所示:

<style>
th span {
float: right;
}
/*Makes every row stand out from the previous*/
tr:nth-child(even) {
background-color: #f2f2f2;
}

.header:hover {
background-color: #e6eeff;
}

table.table-fixed{
table-layout:fixed;
width:100%;
}

</style>

<body>
<div>
<h1>About @Model.Client.ClientDisplayName</h1>
<hr />
</div>
<div>
@foreach (var item in Model.Steps)
{
<h3>@item.Key</h3>
<table class="table table-bordered table-fixed">
<tr class="header">
<th style="width:15%">
Step
</th>
<th style="width:85%">
Description
<span>-</span>
</th>
</tr>
@foreach (var step in Model.Steps[item.Key])
{
<tr>
<td>
@step.Name
</td>
<td>
@step.DetailedDescription
</td>
</tr>
}
</table>
<br />
}

</div>

enter image description here

它位于我页面的中央,看起来不错,但它没有在文本中保留返回字符。所以我查看了它并添加了一个具有以下附加样式的段落标记:

    p.description {
white-space: pre;
}

....

<tr>
<td>
<p class="description">@step.Name</p>
</td>
<td>
<p class="description">@step.DetailedDescription</p>
</td>
</tr>

但现在我的表格不适合文本。见下文。

enter image description here

我阅读了它并认为我应该添加一些 <td>样式,所以我添加了样式规则并更改了我的 <td>相应地标记以包含新类。

    .wrap {
word-wrap: break-word; /*old browsers*/
overflow-wrap: break-word;
}

但它仍然像第二张图片一样出现。文本具有预期的返回字符,但没有多少摆弄 <p>标签或添加 <div>围绕内容似乎有所帮助。

最佳答案

显然,我试图用 CSS 做太多相互冲突的事情。通过向 <td> 添加一个简单的样式我能够以令人满意的方式解决问题。

<style>
...
.wrap {
white-space:pre-line;
}
</style>

<tr>
<td class="wrap">
<p>@step.Name</p>
</td>
<td class="wrap">
<p>@step.DetailedDescription</p>
</td>
</tr>

关于html - 如何将格式化文本包装在响应式表格中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57962256/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com