在reactJS中截断文本 [英] truncate text in reactJS

问题描述

您好我正在使用这个reactJS组件，我想知道reactJS是否具有过滤字符串内容的功能：

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>
    );
  }
});

如何截断span标签内的文本??

How can I truncate the text inside span tag??

问候

推荐答案

您可以将 prop 传递给函数并返回截断的版本：

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(s) {
   /* if (s.length() > 10)
         return truncated value;
      else
         return s; */
}

这篇关于在reactJS中截断文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！