Leerzeichen: nowrap expandiert div?

Question

Ich machte Code in CSS für div .name mit einer Breite von 75%, so dass der Text abgeschnitten, wenn nicht passt. Aber wenn ich mein Fenster verkleinere, bleibt der Text gleich und meine ganze Seite fällt auseinander. mein Code

Dies ist:

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

Ich habe auch bemerkt, dass ich Breite eingestellt nicht richtig funktionieren, wenn ich 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; 
} 

hinzufügen Als ich mit in Prozent und setzte in Pixel abnehmen funktioniert gut, aber wieso kann ich meine div class name in presents nicht setzen?

EDIT: ich hier hinzugefügt jsfiddle: https://jsfiddle.net/nwqoh931/

Answer 1

"white-space: nowrap;erweitert nie ein div."

Es teilt dem <div> nur mit, den Text darin zu verpacken.

Erläuterung/Beispiel:

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>