html - 当标签达到 2 行时如何修复布局

Question

我有一个标签和输入框(表单)，我为 CSS 使用 Bootstrap ，但我的问题是当我的标签变成 2 行/段落时，我的布局不固定或不相等。即使文本是 2 行/段落，如何使布局看起来像主要信息。检查下面的图片

我用这个代码

<div class="col-md-12"> 
<div class="col-lg-2">
   <label class="control-label"><?php echo $required_notice.$val_option['option']?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
   <div class="controls">
      <?php 

       $cur_value = isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'';

       echo form_input('option'.$val_option['id'].'_'.$key, set_value('option'.$val_option['id'].'_'.$key, $cur_value), 'class="form-control '.$val_option['type'].'" id="inputOption_'.$key.'_'.$val_option['id'].'" strlen="'.strlen($cur_value).'" placeholder="'.$val_option['option'].'" '.$required_text.' '.$max_length_text)?>

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

注意:我正在为我的字段使用 foreach。

谢谢。

Answer 1

如果你喜欢有一个省略号，就像这个词就像“你的话是我......”那么你必须将以下代码行应用到你的标签。

.your-label {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   display: block;
 }

如果你有任何问题，请告诉我:)