html - 空白 :nowrap expands div?

Question

我在 css 中为 div .name 编写了宽度为 75% 的代码，以便在不适合时截断文本。但是，当我调整窗口大小时，文本保持不变，我的整个网站都崩溃了。

这是我的代码:

<tr>
    <td class="check_td"><input type="checkbox" name="products" value="<?php echo $row['id']; ?>"</td>
    <td class="product_td">
        <div class="product">
            <div class="thumbnail">
                <img class="img" src="<?php echo $row['img_path'].'/'.$row['img_name']; ?>">
            </div>
        <div class="name">
            <?php echo $row['product_name']; ?> // this is problem
        </div>                          
        <div class="list">
            <ul>
                <li>Prodavač: <a href="" style="color:black;"><strong><?php echo $data['username']; ?></strong></a>
                (<a href="">98% <img src="img/stars/star.png" width="18px" style="margin-bottom:-3px;"/></a>)
                </li>
                <li><?php echo $address['city']; ?></li>
            </ul>
            </div>
            <div class="comm">
              <img src="icons/comment.png" width="23px"/>(6)
            </div>
        <div class="id"><?php echo $row['id']; ?></div>
                        </div>
                    </td>
                    <td class="price_td">
                        <ul>
                            <li style="font-size:23px;">
                                <strong><?php echo $row['price']; ?> kn</strong>
                            </li>
                            <li>
                                <ul class="ship">
                                    <li>
                                        <?php echo $row['ship']; ?>
                                    </li>
                                    <li>
                                        <strong><?php echo $row['ship_price']; ?> kn</strong>
                                    </li>                                           
                                </ul>
                            </li>
                        </ul>
                    </td>
                    <td class="button_td"><button class="menu_buttons1">Istaknite oglas &raquo;</button></td>
                </tr>   

我还注意到，当我添加 white-space:nowrap;

时，我设置的宽度无法正常工作

.name{
  display:block;
  float:left;
  margin:6px 0 10px 0;
  width:75%;
  font-size:20px;
  color:black;
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
    text-overflow: ellipsis;
}

当我以百分比形式删除并以像素为单位进行设置时效果很好，但为什么我不能在礼物中设置我的 div 类名称的宽度？

编辑:我在这里添加了 jsfiddle:https://jsfiddle.net/nwqoh931/

Answer 1

" white-space: nowrap; 从不展开 div。"

它只是告诉<div>禁用其中的文本换行。

解释/示例:

div{
 width: 100px; 
 background: yellow;
}

.whitespace-normal{
  white-space: normal;
}

.whitespace-nowrap{
  white-space: nowrap;
}

<div class="whitespace-normal">
  TESTING OF WHITESPACE
</div>
<i><b>Default White-Space:</b> The text inside the div is wrapped (creates new lines) based on div width.</i>
<br/><br/>
<div class="whitespace-nowrap">
  TESTING OF WHITESPACE
</div>
<i><b>No Wrap White-Space:</b> Disregard the width of div, Even it overflows. It prints the text exactly what it is. (no new lines)</i>