Wrappable Columns

Adding + at the end of a separator cell marks that column as wrappable. The extension adds class="extend" to every <th> and <td> in that column, which you can then style with CSS to allow text to wrap.

Basic example

| Name        | Description                                 | Tags  |
| :---------- | :-----------------------------------------+ | :---- |
| Lorem Ipsum | A long description that should be wrappable | docs  |
| Short       | Brief                                       | misc  |

ResultHTML

Name	Description	Tags
Lorem Ipsum	A long description that should be wrappable	docs
Short	Brief	misc

<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th class="extend" style="text-align:left">Description</th>
<th style="text-align:left">Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Lorem Ipsum</td>
<td class="extend" style="text-align:left">A long description that should be wrappable</td>
<td style="text-align:left">docs</td>
</tr>
<tr>
<td style="text-align:left">Short</td>
<td class="extend" style="text-align:left">Brief</td>
<td style="text-align:left">misc</td>
</tr>
</tbody>
</table>

Wrappable with alignment

The + marker can be combined with alignment colons:

Separator	Effect
-+	Wrappable, no alignment
:-+	Wrappable, left-aligned
:-:+	Wrappable, centre-aligned
-:+	Wrappable, right-aligned

| Col A    | Col B (centred + wrappable)         | Col C  |
| :------- | :---------------------------------:+ | -----: |
| value    | This cell wraps and is centred      | 42     |

ResultHTML

Col A	Col B (centred + wrappable)	Col C
value	This cell wraps and is centred	42

<table>
<thead>
<tr>
<th style="text-align:left">Col A</th>
<th class="extend" style="text-align:center">Col B (centred + wrappable)</th>
<th style="text-align:right">Col C</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">value</td>
<td class="extend" style="text-align:center">This cell wraps and is centred</td>
<td style="text-align:right">42</td>
</tr>
</tbody>
</table>

Styling wrappable columns

The extend class does not add any default style. Add a rule such as the following to your stylesheet to enable wrapping:

td.extend, th.extend {
  white-space: normal;
  word-break: break-word;
}