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

有办法吗

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

我想要这样的东西：

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

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

我知道有可能从parragraph中截取确定部分的文本。说prod1。。。相反，prod1是业界最好的产品

---

任何能够解决这个问题的人？

您应该能够通过向描述单元添加一些css来实现这一点

.truncate{
宽度：[宽度]；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

{product.description}

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

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