Question

我有这个标记

<li>
    <img>
    <div class="texts">
        <h2>Title</h2>
    </div>
</li>

和这个CSS

li{
  display: flex;
  flex-wrap: wrap;
}

li img{
  align-self: center;
}

li .texts{
  flex: 1;
}

li .texts h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

结果将是一个小缩略图和旁边的一些文本，我希望.texts元素填充剩余的horizental空间，它确实工作正常，直到我在white-space: nowrap上使用h2 {1}}元素，当我这样做时，它会破坏所有内容，.texts元素会转到下一行。

Answer 1

您需要做两件事：

广告素材.texts需要min-width，默认为auto，设置为0，否则不允许缩小li而不是其内容，因此不会呈现省略号。
~~更正了CSS中的错误，.texts规则中的li.texts h2和li .texts h2之间没有空格，h2 }正确定位flex-wrap: wrap元素~~

我还删除了li { display: flex; } li img{ align-self: center; } li .texts{ flex: 1; min-width: 0; } li .texts h2{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }，因此在某些浏览器中不会造成麻烦。

Stack snippet

<ul>
  <li>
    <img src="http://placehold.it/150x50/f00">
    <div class="texts">
      <h2>Title, long enough to break line if parent to small</h2>
    </div>
  </li>
</ul>

    <div class="item form-group">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">select Categories <span class="required">*</span>
              </label>
              <div class="col-md-6 col-sm-6 col-xs-12">

   <select class="form-control" name="cat" id="catogires">
<!-- <option  value="">Select categories</option>-->
            <?php 
               $data=$this->Product_Model->cat_select();

            foreach($data as $row)
            { ?>
                <option <?php if ($product->cat_id==$row->cat_id) echo "selected='selected'"; ?> value="<?php echo $row->cat_id?>"><?php echo $row->cat_name;?></option>
         <?php

           }
            ?>

            </select>
              </div>
            </div>

flex-item的子项上的截断文本会影响flex-item

1 个答案: