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 &raquo;</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

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -