Wrapping Text In WebGrid Columns - css

Question

I working on a project in MVC 4 where I am leveraging WebGrid to display various data elements for my models.
Currently, one of my models has a text property that accommodates a large amount of text. Yet when it is displayed via WebGrid, the text fails to wrap and extends the length of the grid. Needless to say, this looks very ugly and makes the text difficult to read.
Is there a way to either:
a) Wrap text of a specific column in WebGrid
b) Style the grid or column using CSS somehow to achieve the same effect.
I have done much research on this topic, but have not come up with much of anything that directly applies to this simple scenario.
The most useful link I found is this one, but it is somewhat old and does not directly address my needs.
I can't imagine why text wrapping was not included in the basic implementation of WebGrid, but it does not appear to be part of its integral functionality.
Anybody have any ideas?

Answer 1

You use CSS to manage this kind of thing. The WebGrid renders an HTML table so you can declare styles for tables and they will be adopted when the grid renders.
There are also some CSS hooks built in to the WebGrid. You can specify the CSS class that the individual table uses through the tableStyle parameter:
grid.GetHtml(tableStyle: "myStyle")
Or you can apply styles at column level:
grid.GetHtml(
columns: grid.Columns(
grid.Column(("ID"),
grid.Column("MyText", style: "wordwrap")
)
)
I've written about the WebGrid in detail here: http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid
To get words to wrap using CSS, you need a combination of table-layout: fixed on the table and word-wrap:break-word on the table cell. See here for example: How to force table cell <td> content to wrap?