white-space：nowrapがdivを展開しますか？

Question

div .nameの幅を75％としたCSSのコードを作成しました。しかし、サイズを変更するとウィンドウのテキストが変わらず、サイト全体が崩れてしまいます。

これは私のコードです：

<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クラス名の幅をプレゼントに設定できないのですか？

EDIT： 私はここに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>