pablosichert/react-truncate

html tags in children

codejet opened this issue · 12 comments

codejet commented

This is not really an issue but rather a question.

In your documentation for the "children" property it says "Anything that can be evaluated as text." and you list examples including markup. I've seen that you are using textContent to extract the plain text from what's being passed in as children.
What do you think about preserving at least some markup, like a set of allowed tags? I know that it makes things more complicated, but it might be useful.

pablosichert commented

That's an interesting question, I guess you are talking about preserving something like <b>, <i>, and <u> tags - would it be possible that you provide the particular scenario that you have in mind?

It might be possible to work out a solution with a combination of textContent, innerHTML and childNodes.

Iterating over the child nodes, and appending them unmodified when the text content fits completely. Then, for the first child node that exceeds the boundaries modifying its HTML to make it fit, and finally, appending the ellipsis.

This might fail horribly when the width of the DOMNode is different from <span>DOMNode.textContent</span>, since the calculation relies on that. Also, adjusting the HTML of the exceeding node could be really tricky, and approximating it with the text content would be fair enough to make a demo work.

If you want to take a shot at implementing this, I'm more than willing to help you figure it out!

codejet commented

Thanks for the fast reply @pablosichert

As we all know, time is usually the issue :) But should I find some this weekend or so, I will see what I can do. Can't promise anything though...

pablosichert commented

Digging around a bit, I found out about the Range API.

Making use of Range.extractContents() could be feasible.

Selecting the nodes accordingly and modifying a node, when the end lies within a non-text node could be tricky. Haven't tried yet.

t1mmen commented

Is this still being considered? I'd love HTML support (or at the very least, some sort of markup passthrough)

  • 👍17
pablosichert commented

Working out a solution would mean investing a considerable amount of time - and unfortunately I didn't have a use case that would have justified the time for me.

I think https://github.com/glinford/ellipsis.js made it work, but I didn't get to review yet how it's implemented and what the performance implications would be.

If you want to contribute by porting that feature, I would very welcome it.

cbosco commented

@codejet @pablosichert Thanks for pointing me to ellipsis.js

I made a simple react component if others are trying to use ellipsis.js within React

https://gist.github.com/cbosco/4339f6d842c6c9ac35f21982e98b4412

There is one caveat - ellipsis.js works well with the exception of comment nodes; I put a PR into ellipsis.js: glinford/ellipsis.js#7

Also, ellipsis.js on npm is outdated, you'll want to point to either glinford or cbosco via github

  • 👍4
paramjitkaur commented

But if I use Ellipsis.js it does not give me the ontruncate Function and just adds ellipsis.I need both read more/show less and te description needs to be html :)
Is there anything that can help me in addressing both the issues

jesspoemape commented

My text was an html string (ie. "<p>Some text</p><br /> br /><p>Some more text</p>") and I was able to use this:

<span dangerouslySetInnerHTML={{ __html: textStringWithHTML  }} />

as a the child element and the html tags worked!

  • 👍3
kashifshamaz21 commented

@jesspoemape Can you share your sample code that you used with children prop set to a html string and found it working! I'm trying to use the same, but haven't got the html tags getting rendered yet.

XigeTime commented

Hi @kashifshamaz21, if you're still looking to get HTML content working, try this:
<Truncate lines={2} ellipsis={'...'}> <span dangerouslySetInnerHTML={{ __html: your_html } } /> </Truncate>

Simply set the inner HTML on a child component rather than the Truncate component.

lincolncooper commented

Unfortunately react-truncate-markup does not support React components, only true DOM elements, which I found a problem as the markup I want to display is created using a number of nested React components. I wish/hope there is a better way, but I found this "hack" to make it work based on XigeTime's solution above:

import { renderToString } from 'react-dom/server';
import Truncate from 'react-truncate';

const html = renderToString(children);
<Truncate lines={2}>
    <span dangerouslySetInnerHTML={{ __html: html }} />
</Truncate>

PLEASE tell me there is a more elegant way to do this!

  • 👍1