Question

我有桌子，其中td内的文字长度不同。我想给td元素赋予固定宽度，并在td元素上使用text-overflow: ellipsis，这样就不会显示整个文本。我尝试了不同的方法，但没有任何作用，请有人帮助我如何实现这一点。

＆＃13;

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

＆＃13;

Answer 1

添加此css规则

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

注意：使用 max-width 而非宽度

修改：JS-Fiddle Link

Answer 2

th,td
{
max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}

这将起作用

Answer 3

样式表单元格一直存在问题。

目前最可靠的方法是在每个单元格中添加容器块并设置样式。

＆＃13;

div.c {
  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

＆＃13;

<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><div class="c">"Metallic turquoise leather envelope clutch"</div></td>
    <td><div class="c">https://www.runway2street.com/bags/clutch-bags/metallic-turquoise-leather-envelope-clutch</div></td>
    <td><div class="c">" 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 "</div></td>
    <td><div class="c">4</div></td>
    <td><div class="c">new</div></td>
    <td><div class="c">"370 USD"</div></td>
    <td><div class="c">"in stock"</div></td>
    <td><div class="c">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</div></td>
    <td><div class="c">"US::Standard Free Shipping: 47 USD"</div></td>
    <td></td>
    <td></td>
    <td><div class="c">Anja</div></td>
    <td><div class="c">FALSE</div></td>
    <td><div class="c">"Apparel &amp; Accessories &gt; Handbags, Wallets &amp; Cases &gt; Handbags &gt; Clutches &amp; Special Occasion Bags"</div></td>
    <td><div class="c">"Clutch Bags"</div></td>
    <td><div class="c">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</div></td>
    <td><div class="c">Turquoise/Cork</div></td>
    <td><div class="c">"One size"</div></td>
    <td><div class="c">Female</div></td>
    <td><div class="c">Adult</div></td>
    <td><div class="c">ANJAFW12mec.ct</div></td>
    <td></td>
    <td></td>
    <td><div class="c">Regular</div></td>
    <td><div class="c">US</div></td>
  </tr>
</table>

＆＃13;

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

3 个答案: