Hi I'm working in this reactJS component and I want to know if reactJS has capabilities to filter string contents:
var Album = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div className='col s12 m6 l4'>
<div className='card'>
<div className='card-image'>
<img style={{minHeight:'220px', maxHeight:'220px' }} src={this.props.image} />
</div>
<div className='card-content' style={{minHeight:'100px', maxHeight:'100px'}}>
<span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
{this.props.name}
</span>
</div>
<div className='card-action'>
</div>
</div>
</div>
);
}
});
How can I truncate the text inside span tag??
regards
You can pass the prop
to function and return the truncated version:
...
<span style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
{this.truncate(this.props.name)}
</span>
...
truncate: function(str) {
return str.length > 10 ? str.substring(0, 7) + "..." : str;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With