whitespace:normal versus whitespace:pre-line

Question

I have html tables that I want to display newlines in because of the amount of potential text users can add. Setting <td>s with style="white-space:pre-line" causes the table to display newlines, just like I want.

However, it also adds a bunch of padding in the cell that I do NOT want. What is the correct way to eliminate this extra padding (where it would be the same as the example shown for style="white-space:normal") but still recognize newlines?

Bootstrap is being used.

<td>s with style="white-space:pre-line". Note extra padding within cell. This adds up to lots of wasted screen real estate.

<td> with style="white-space:normal". More compact (good), but does not display newlines in table cells.

<div class="table-responsive" id="">
<table class="table table-hover table-condensed">
    <thead>
        <tr>
            @for (int j = 0; j < Model.Tables[i].TableRows[0].TableCells.Count(); j++)
            {
                <th class="header">Column Name</th>
            }
        </tr>
    </thead>
     <tbody class="list">
        @for (int k = 1; k <= Model.Tables[i].TableRows.Count() - 1; k++) 
        {
            <tr>
                @for (int l = 0; l < Model.Tables[i].TableRows[k].TableCells.Count(); l++)
                {
                    <td class="" style="white-space:pre-line;">
                        <a href="#EditTableCellModal">Cell Text </a>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>
</div>

please post a working snippet of your example so that we can give you workable code back. — tstrand66, Jul 07 '20 at 21:02
this looks like a razor page. give this thread a look https://stackoverflow.com/questions/4220381/replace-line-break-characters-with-br-in-asp-net-mvc-razor-view — tstrand66, Jul 07 '20 at 21:59

score 0 · Answer 1 · answered Jul 08 '20 at 15:26

Based on the response from tstrand66 and the thread at Replace line break characters with <br /> in ASP.NET MVC Razor view , the following solution works:

 <div class="table-responsive" id="">
   <table class="table table-hover table-condensed">
   <thead>
    <tr>
        @for (int j = 0; j < Model.Tables[i].TableRows[0].TableCells.Count(); j++)
        {
            <th class="header">Column Name</th>
        }
    </tr>
   </thead>
   <tbody class="list">
    @for (int k = 1; k <= Model.Tables[i].TableRows.Count() - 1; k++) 
    {
        <tr>
            @for (int l = 0; l < Model.Tables[i].TableRows[k].TableCells.Count(); l++)
            {
                <td class="" style="white-space:pre-line;">
                    <a href="#EditTableCellModal">@Html.Raw(Html.Encode(CellText).Replace("\n", "<br />"))</a>
                </td>
            }
        </tr>
    }
   </tbody>
  </table>
 </div>

I will note that this did not render properly in an HTML to PDF conversion using SelectPDF, where it just displayed the <br /> inline with the rest of the text. But as noted, it displayed as expected with newlines in a browser.

whitespace:normal versus whitespace:pre-line

1 Answers1