空格属性CSS

Question

I have a following td block which present data as follows:

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>

I want my td to display data like this:

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

Which CSS attribute should I use to achieve the result? All the lines which are wrapped should contain some whitespaces.

Answer 1

[from comments] I want to break the line , where the width of the table cell dictates and once the content is wrapped when it crosses table cell width it should leave some white space and then start the content.

So something like this?

 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; creates a padding for all the content in the cell, and then text-indent:-20px; “drags” the first line back to the left by that same amount.

Answer 2

I think what you're looking for is

 td{ white-space: pre;  }

It will preserve any white-space characters written into your paragraphs.

Here's a good article about it: https://css-tricks.com/almanac/properties/w/whitespace/

See the MDN documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space