Linebreaking of links

问题

I have a column filled with text in tabulator. The text is displayed with line breaks.

{title:"Title", field:"title", formatter:"textarea"},

When I introduce the built in URL formatter, the text in the first column does not break anymore.

  {title:"Title", field:"title", formatter:"textarea", formatter:"link", formatterParams:{target:"_blank", urlField:"source"}},

Is there a way to introduce link while keeping the linebreaks?

回答1:

By default, tabulator renders the cells with "white-space: nowrap" (as defined in CSS class tabulator-cell in tabulator.css).

The formatter "textarea" overrides that by manually setting "pre-wrap" on the style of the cell element: modules/format.js

Options:

1. Write a custom formatter (to render a link with "white-space: pre-wrap")
2. Add your own CSS (after tabulator.css, to make sure the css cascade works) to target links inside tabulator-cell to set "white-space: pre-wrap". This should work:

   .tabulator-row .tabulator-cell a {
       white-space: pre-wrap;
   }
   

回答2:

http://tabulator.info/docs/4.0/format#format-height

Variable Height Formatters

By default formatters will keep their contents within the height of the current row, hiding any overflow. The only exception to this is the textarea formatter which will automatically vary its height when the column is resized so its contents does not overflow.

If you would like this functionally to appear in another type of formatter you can set the variableHeight property to true in the column definition and it will will behave in a similar way to the textarea formatter:

{title:"Name", field:"name", formatter:myCustomFormatter, variableHeight:true}

also you can not set multiple formatters at once , that is wrong:

{title:"Title", field:"title", formatter:"textarea", formatter:"link", formatterParams:{target:"_blank", urlField:"source"}}
-                              ^^^^^^^^^ overriden by ^^^^^^^^

来源：https://stackoverflow.com/questions/59215573/linebreaking-of-links