如何在产品列表的描述行中使用省略号截断溢出文本？

Question

有没有办法

                              e.g

相反，我有“产品 1 是业内最好的”，我尝试了这个“产品 1...”

这是我的代码：

           import React, { Component } from 'react';
           import { connect } from 'react-redux';
           import { searchProducts, deleteProduct } from '../../actions';
           import { Link } from 'react-router-dom';
           const moment = require('moment');


            class ProductList extends Component {
                      componentDidMount() {
                      this.props.searchProducts();
                         }


                  runFiles() {
                      return this.props.productList.map(product => {
                          return (
                         <tr key={product._id}>
                     <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.name}</td>
              {/*IN THE FOLLOWING ONE LINE I WANT TO TRUNCATE DESCRIPTION*/}
                    <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.description}</td>
                          <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.brand}</td>
                            <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.price}</td>
                   <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.stock}</td>
                         <td style={{fontStyle: 'italic',fontWeight:'500'}}>{product.code}</td>
                      <td style={{fontStyle: 'italic',fontWeight:'500'}}>{producto.isPassedAway}</td>
                          <td style={{fontStyle: 'italic',fontWeight:'500'}}> 
                       {moment(product.createdAt).format('DD-MM-YYYY HH:mm:ss')}</td>
                               <td style={{fontStyle: 'italic',fontWeight:'500'}}> 
                             {moment(product.passedAwayAt).format('DD-MM-YYYY HH:mm:ss')}</td>
                                  <td>
                                <Link to={`/products/${product._id}/show`} className='mr-2' style= 
                           {{fontWeight:'bold',color:'blue'}}>
                                   show
                                   </Link>
                             <Link to={`/products/${product._id}/edit`} className='mr-2' style= 
                                {{fontWeight:'bold',color:'blue'}}>
                                   Edit
                                       </Link>
                                      <a
                                     className='mr-2'
                                       style={{fontWeight:'bold',color:'blue'}}
                                        href='#more'
                                        onClick={() => {
                                      if (
                                          window.confirm(
                                 '¿Are you sure to want to delete the product?' + ' ' + product.name
                                            )
                                          )


                                      this.props.deleteProduct(product._id);

                                          }}
                                            >
                                      Delete
                                      </a>
                                      </td>
                                      </tr>
                                          );
                                     });
                                           }

                                          render() {
                                                 return (
                                                  <div>
                                          <h2><b>Listing products</b></h2>

                                         <p>
                                 <Link to='/products/new' className= 'btn btn-primary' style= 
                          {{fontWeight:'bold',color:'black'}}>
                                 New
                                  </Link>
                                     </p>

                                 <div className='table-responsive'>
                                   <table className='table table-sm'>
                                <thead className='thead-light'>
                                        <tr>
                                       <th style={{fontStyle: 'arial'}}>Name</th>
                                       <th style={{fontStyle: 'arial'}}>Description</th>
                                       <th style={{fontStyle: 'arial'}}>Brand</th>
                                       <th style={{fontStyle: 'arial'}}>Price</th>
                                       <th style={{fontStyle: 'arial'}}>Stock</th>
                                       <th style={{fontStyle: 'arial'}}>Code</th>
                                       <th style={{fontStyle: 'arial'}}>Is passed Away</th>
                                       <th style={{fontStyle: 'arial'}}>Created At</th>
                                       <th style={{fontStyle: 'arial'}}>Passed Away At</th>
                                       <th style={{fontStyle: 'arial'}}>Actions</th>
                                          </tr>
                                          </thead>
                                       <tbody>{this.runFiles()}</tbody>
                                       </table>
                                       </div>
                                       </div>
                                    );
                                        }
                                         }

                        function mapState(state) {
                                   return {
                                  productList: state.productsDs.productList
                                       };
                                           }

                              const actions = {
                                      searchProducts,
                                      deleteProduct
                                          };


                                  export default connect(
                                         mapState,
                                           actions
                                        )(ProductList);

获取到 componentDidMount 的产品列表如下：

                 [product1:{name: "product 1",description:"the product 1 is biggest of the 
                      factory"},...//OTHER FIELDS]

我想要这样的东西：

                        product 1: {name: "product1", description: "the product 1..."//OTHER FIELDS,... }

                   in every description rows form each product I want to truncate text with ellipsis.

我知道有可能从段落中截断确定部分的文本。说 prod1... 而 prod1 是业内最好的。

谁能解决这个问题？

Answer 1

您应该能够通过在描述单元格中添加一些 css 来实现。

.truncate {
  width: [width];
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<td className="truncate" style={{fontStyle: 'italic',fontWeight:'500'}}>{product.description}</td>