html - white-space:nowrap expands div? -
i made code in css div .name
width of 75% text truncate if doesn't fit. when resize window text stays same , whole site falls apart.
this code:
<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']; ?> // 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 »</button></td> </tr>
i noticed width set don't work when add 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; }
when remove in percents , set in pixels works nice, why can't set width of div class name in presents?
edit: added jsfiddle here: https://jsfiddle.net/nwqoh931/
"white-space: nowrap;
never expands div."
it tells <div>
disable wrapping text inside it.
explanation/example:
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> text inside div 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 width of div, overflows. prints text is. (no new lines)</i>
Comments
Post a Comment