Question

我有一个以下的td块，它提供如下数据：

My name is Ramya and 
I love football.
I work for ABC Company.

<td style="text-align: left;overflow-wrap:break-word;width:50px;">

@Html.DisplayFor(modelItem => item.Text)

</td>

我希望我的td显示如下数据：

My name is Ramya and 
     I love football.
     I work for ABC 
     Company.

我应该使用哪个CSS属性来实现结果？包装的所有行都应包含一些空格。

Answer 1

[来自评论]我想打破表格单元格宽度所指示的那一行，一旦内容在跨越表格单元格宽度时被包装，它应该留下一些空格，然后启动内容。

这样的事情？

td { width:100px; overflow-wrap:break-word; padding-left:20px;
     text-indent:-20px; text-align:left; background:#fcc; }

<table>
  <tr>
    <td>
      My name is Ramya and I love football. I work for ABC Company.
    </td>
  </tr>
</table>

padding-left:20px;为单元格中的所有内容创建一个填充，然后text-indent:-20px;将第一行“拖”回左侧相同的数量。

Answer 2

我认为您正在寻找的是

 td{ white-space: pre;  }

它将保留写入段落的任何空白字符。

这是一篇关于它的好文章：https://css-tricks.com/almanac/properties/w/whitespace/

请参阅此处的MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

白色空间属性CSS

2 个答案: