How to use truncate - 10 common examples

<button style="{{marginTop:">
                  
                </button>
              
              <span style="{{marginLeft:"> {tableType}</span>
            
          
          
            {/* title, etc. */}
            <h4 style="{{margin:">
              {numberOfTrips} trips for{' '}
              <span title="{patternName}">
                {patternName ? `${truncate(patternName, 15)} on ` : '[select pattern]'}
              </span>
              <span title="{calendarName}">
                {patternName &amp;&amp; !calendarName
                  ? '[select calendar]'
                  : !patternName
                    ? ''
                    : `${truncate(calendarName, 13)} calendar`}
              </span>
            </h4>
          
          
            {/* Offset number/button */}

const Failure = ({ name, url, reason }) => (
  <div>
    <a href="{">
      <div>{ name }</div>
      <div>{truncate(reason, 60)}</div>
      <p>{reason}</p>
    </a>
  </div>
);

observation.text(`Página ${page} de ${pages}`);

            let open = (when, contact) => e => {
                e.preventDefault();
                let modal = controller.call('modal');
                modal.title('Atualização da Cobrança');
                modal.subtitle(`Histórico do Contato ${when.format('LLLL')}`);
                modal.paragraph(contact.observation);
            };

            for (let contact of entity.history.slice(skip, skip + LIMIT)) {
                let when = moment.unix(contact.when);
                let next = moment.unix(contact.next);

                list.item('fa-archive', [
                    truncate(contact.observation, 40),
                    when.fromNow()
                ]).click(open(when, contact));
            }
        };

render() {
    const {
      entity, icon = false, truncate,
    } = this.props;

    if (!entity) {
      return null;
    }
    const caption = entity.getCaption();
    const label = truncate ? truncateText(caption, truncate) : caption;
    return (
      <span title="{caption}">
        {icon &amp;&amp; }
        {label}
      </span>
    );
  }
}

super(props);

    /**
     * Do the work to sort out the data then pass to state.
     */
    let result = props.result._source
    let sO = {allowedTags: [], allowedAttributes: []}
    /**
     * If an empty search happens, then highlight won't be populated, account
     * for this.
     */
    let resultDescription = typeof props.result.highlight != 'undefined' ? props.result.highlight['description'][0] : result['description']

    this.state = {
      url: result['url'],
      title: truncate(sanitizeHtml(result['title'], sO), 80),
      /**
       * Description will have <strong> tags in it to highlight the search
       * term, allow it to be displayed!
       */
      description: {
        __html: truncate(sanitizeHtml(resultDescription, {
          allowedTags: ['strong'],
          allowedAttributes: []
        }), 160)
      },
      additionalFields: []
    }

    const additionalFields = (props.additionalFields) ? props.additionalFields.map(function(v,i,a){
        return <div> 
          {result[v.name]}</div></strong>

function _mapScreencast(screencast) {
      screencast = screencast.dataValues;
      return {
        screencastId: screencast.screencastId,
        title: screencast.title,
        description: truncate(screencast.description, config.descriptionLength),
        href: config.host + 'api/screencasts/' + screencast.screencastId,
        duration: moment
          .duration(screencast.durationInSeconds, 'seconds')
          .format('hh:mm:ss'),
        tags: screencast.Tags.map(tag => tag.tagName),
        submissionDate: screencast.submissionDate,
        channel: {
          channelId: screencast.Channel.channelId,
          channelName: screencast.Channel.channelName
        },
        featured: screencast.featured,
        referralCount: screencast.referralCount
      };
  }

let sO = {allowedTags: [], allowedAttributes: []}
    /**
     * If an empty search happens, then highlight won't be populated, account
     * for this.
     */
    let resultDescription = typeof props.result.highlight != 'undefined' ? props.result.highlight['description'][0] : result['description']

    this.state = {
      url: result['url'],
      title: truncate(sanitizeHtml(result['title'], sO), 80),
      /**
       * Description will have <strong> tags in it to highlight the search
       * term, allow it to be displayed!
       */
      description: {
        __html: truncate(sanitizeHtml(resultDescription, {
          allowedTags: ['strong'],
          allowedAttributes: []
        }), 160)
      },
      additionalFields: []
    }

    const additionalFields = (props.additionalFields) ? props.additionalFields.map(function(v,i,a){
        return <div> 
          {result[v.name]}
        </div>
      }) : []

    this.state.additionalFields = additionalFields
  }
</strong>

} = this.props;
    if (!collection || !collection.id) {
      return null;
    }

    let iconName = 'database';
    const style = {};
    if (collection.casefile) {
      iconName = 'briefcase';
    } else if (collection.secret) {
      iconName = 'lock';
    }

    let text = collection.label;
    if (truncate) {
      text = truncateText(collection.label, truncate);
    }

    return (
      <span title="{collection.label}">
        { icon &amp;&amp; ()}
        <span>{ label &amp;&amp; text }</span>
      </span>
    );
  }
}