White Space property 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.

@chillvivek Only from line 2 this property should apply. Will above work? I guess it applies all lines. — RMu, Aug 06 '15 at 11:08
@Nalaka Only from line 2 this property should apply. Will above work? I guess it applies all line — RMu, Aug 06 '15 at 11:08
@chillvivek I want to manipulate number of whites paces before each line and it should be the same for all except first line. So text-align: right wotn work for me — RMu, Aug 06 '15 at 11:12
use two td tages with `style="text-align: left` and `style="text-align: right` — Nalaka, Aug 06 '15 at 11:14
@Nalaka I'm receiving data from one model variable and i'm not sure how big it is. How to divide it into two td? I have given my td above in the question. Could you give me a sample? — RMu, Aug 06 '15 at 11:18
looks like setting the width is the only option: http://stackoverflow.com/questions/2757483/limiting-the-number-of-characters-per-line-with-css — chillvivek, Aug 06 '15 at 11:18
Do you want the line breaks to appear automatically, where the width of the table cell dictates? Or do you have the line breaks inside your actual content already, as shown, and simply want it to break there, and have the cell width automatically adapt? — CBroe, Aug 06 '15 at 11:23
@CBroe 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. — RMu, Aug 06 '15 at 11:27

score 2 · Accepted Answer · answered Aug 06 '15 at 11:50

[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.

This is what I exactly looking for! Thank you very much!! – RMu Aug 06 '15 at 11:55 — RMu, Aug 06 '15 at 11:55

score 0 · Answer 2 · edited Aug 07 '15 at 08:43

0

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

edited Aug 07 '15 at 08:43

ketan

19,129
42
60
98

answered Aug 06 '15 at 12:03

Nathan Blair

167
1
7

White Space property CSS

2 Answers2