Table cells with very long text

support
1

Is there any good trick to avoid 1000 char long lines when table cells have lots of text?

2

Most probably employing CSS, using text-wrap, word-wrap and similar properties.

Googling for “css wrap text in table cell” turns up a lot of hits.

1 Like
3

Thanks for the answer. My rendered table looks good with the Docsy template what I’m using. I have verry, very long lines in the markdown side.

4

Just rechecked tried some variants and it won’t work, sry

deleted content

sounds like you need a markdown formatter for your editor.
also a search for that will reveal options depending on your editor.
I personally use Prettier plugin with VSCode

5

Thanks for the hint. I will check Prettier. I also use VS Code.

6

investigated a little, but looks like there’s no way have markdown formatted with wrapped cell content. Keep in mind that hugo uses goldmark which is common-mark compliant.

You could switch to fe. pandoc or asciidoc (maybe for these big table sources) that can do something like that but read about the caveats.

7

Thanks for checking. Can I use pandoc or asciidoc only to render the big tables?

8

nope - not OOTB

the processor can be specified per file (by frontmatter or file extension).

In theory you maybe can implement something custom using RenderString but I never tried.

Also and that will be your main point - guess no formatter will handle mixed markup types in one file properly. So you might need to outsource the tables to a resource file and include that fe using a shortcode. Lot’s of effort.

If applicable and you control the content you could inline a table in such pages. Solves your line break issue, but a html table doesnt look like a table in source :wink:

9

Using an alternate content format as suggested by @irkode is pretty easy to do. Both pandoc and reStructuredText support multiline tables. The example below assumes you want to try both.

Step 1: Installation

On Linux that would be:

sudo apt install pandoc
sudo apt install python3-docutils

The first line installs pandoc for rendering pandoc markup.
The second line installs rst for rendering reStructuredText markup.

Step 2: Configuration

Add this to your site configuration to allow Hugo to call both pandoc and rst.

[security.exec]
allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^git$', '^npx$', '^postcss$', '^tailwindcss$', '^pandoc$', '^rst$']

Step 3: Create a couple of code block render hooks

layouts/_default/_markup/render-codeblock-pandoc.html 
{{ .Inner | .Page.RenderString (dict "markup" "pandoc") }}
layouts/_default/_markup/render-codeblock-rst.html 
{{ .Inner | .Page.RenderString (dict "markup" "rst") }}

Step 4: Add some markup to your content file

## Pandoc

```pandoc
+---------------+---------------+--------------------+
| Fruit         | Price         | Description        |
+===============+===============+====================+
| Bananas       | $1.34         | This is a long     |
|               |               | line of text.      |
+---------------+---------------+--------------------+
| Oranges       | $2.10         | This is also a     |
|               |               | long line of text. |
+---------------+---------------+--------------------+
```

## reStructuredText

```rst
+---------------+---------------+--------------------+
| Fruit         | Price         | Description        |
+===============+===============+====================+
| Bananas       | $1.34         | This is a long     |
|               |               | line of text.      |
+---------------+---------------+--------------------+
| Oranges       | $2.10         | This is also a     |
|               |               | long line of text. |
+---------------+---------------+--------------------+
```

Notes

  1. For CI/CD deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must install pandoc and/or rst on the build machine.
  2. Hugo “shells out” to the pandoc and rst executables. Rendering of these content formats is not as fast as rendering Markdown, Emacs Org Mode, or HTML.