Comments (12)
Is this still being considered? I'd love HTML support (or at the very least, some sort of markup passthrough)
from react-truncate.
@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
from react-truncate.
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!
from react-truncate.
This package works for me: https://www.npmjs.com/package/react-truncate-markup
from react-truncate.
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!
from react-truncate.
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!
from react-truncate.
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...
from react-truncate.
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.
from react-truncate.
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.
from react-truncate.
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
from react-truncate.
@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.
from react-truncate.
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.
from react-truncate.
Related Issues (20)
- <br> tags being added to truncated lines HOT 8
- 3rd party device recognition is blocking usage
- Maintenance status? HOT 2
- ellipsis still display when text isn't too long HOT 1
- ComponentWillUnmount ellipsis removal fails in test suites and other situations HOT 5
- Cannot set property 'font' of undefined HOT 3
- In jest tests - the ellipsis always show, regardless of whether it truncates. HOT 1
- Ellipsis not shown when text is only one word
- Truncate get error on 'width' prop when my app still work in another tab like keep-alive component
- Wrong lines calculation when width specified and having responsive container HOT 3
- React v17 support HOT 2
- Last line length changes when parent component set to display none
- Jest: Can not test onTruncate method HOT 3
- Update to React 17 HOT 5
- deleted
- wrong width of span on load HOT 2
- New release HOT 1
- React 18 support HOT 1
- Can't add as dependency in React 18 HOT 10
- Wrong line breaks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-truncate.