html - 将宽度和省略号设置为表格的 元素

Question

我有一个表，其中 td 内的文本长度不同。我想为 td 元素提供固定宽度，并在 td 元素上使用 text-overflow: ellipsis ，这样就不会显示整个文本。我尝试了不同的方法，但没有任何效果，请有人帮助我实现这一目标。

		<table>
		   <tr>
		      <th>title</th>
		      <th>link</th>
		      <th>description</th>
		      <th>id</th>
		      <th>condition</th>
		      <th>price</th>
		      <th>availability</th>
		      <th>image_link</th>
		      <th>Shipping</th>
		      <th>"shipping weight"</th>
		      <th>gtin</th>
		      <th>brand</th>
		      <th>mpn</th>
		      <th>google_product_category</th>
		      <th>product_type</th>
		      <th>additional_image_link</th>
		      <th>color</th>
		      <th>size</th>
		      <th>Gender</th>
		      <th>age_group</th>
		      <th>item_group_id</th>
		      <th>sale_price</th>
		      <th>"sale price effective date"</th>
		      <th>size_type</th>
		      <th>size_system</th>
		   </tr>
		   <tr>
		      <td>"Metallic turquoise leather envelope clutch"</td>
		      <td style="width: 200px">https://www.runway2street.com/bags/clutch-bags/metallic-turquoise-leather-envelope-clutch</td>
		      <td>" This elegant jeweltoned metallic leather envelope clutch with wrist strap is perfect for a fancy night out! It has a natural cork trim, magnetic closure and a zipper pocket on the inside to fit a cell phone. All accessories and hardware on the bag are gold plated.  Material: 100 leather, goldplated hardwareCountry of manufacture: Lebanon  "</td>
		      <td>4</td>
		      <td>new</td>
		      <td>"370 USD"</td>
		      <td>"in stock"</td>
		      <td>http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_38_320x480_v3.jpg</td>
		      <td>"US::Standard Free Shipping: 47 USD"</td>
		      <td></td>
		      <td></td>
		      <td>Anja</td>
		      <td>FALSE</td>
		      <td>"Apparel &amp; Accessories &gt; Handbags, Wallets &amp; Cases &gt; Handbags &gt; Clutches &amp; Special Occasion Bags"</td>
		      <td>"Clutch Bags"</td>
		      <td>http://az697095.vo.msecnd.net/vnext/products/3/12/Anja_Not-for-the-shy_accessories_bags_clutches_Turquoise-Cork_Metallic-turquoise-leather-envelope-clutch_35_320x480_v3.jpg</td>
		      <td>Turquoise/Cork</td>
		      <td>"One size"</td>
		      <td>Female</td>
		      <td>Adult</td>
		      <td>ANJAFW12mec.ct</td>
		      <td></td>
		      <td></td>
		      <td>Regular</td>
		      <td>US</td>
		   </tr>
		</table>

Answer 1

添加这个CSS规则

table td {
    white-space: nowrap; 
    min-width: 100px;
    max-width: 100px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

注意:使用ma​​x-width 而不是width

编辑:JS-Fiddle Link