내 라벨이 2 줄에 도달했을 때 레이아웃 수정 방법

라벨 및 입력 상자 (양식)가 있고 CSS에 부트 스트랩을 사용하지만 제 라벨이 2 줄/단락이 될 때 제 레이아웃이 고정되거나 동일하지 않습니다. 텍스트가 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를 사용하고 있습니다.

감사합니다.

출처

2017-12-19 Carlvic Lim

입력 뒤에 라벨을 표시 하시겠습니까? – JazZ

당신은'text-overflow : ellipsis; '원하는 경우 title = "demo"를 다음과 같이 추가하십시오 : https://www.w3schools.com/code/tryit.asp?filename=FMM3FT46CEXF –

단어와 같은 줄임표가 있으면 "귀하의 단어는 l ..."입니다. 그러면 레이블에 다음 코드 줄을 적용해야합니다.

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

당신이 가지고있는 경우 어떤 문제가 알려주세요 :)

출처

2017-12-19 06:04:57

Thankyou! 줄임표로 문제를 해결할 수 있다고 생각하지만 사람들이 필드를 이해할 수 있도록 전체 라벨 이름을 표시하고 싶습니다. –

다음 글꼴 크기를 줄일 수 있습니다 :)하지만 긴 텍스트가있을 수 있으므로 줄임표를 사용하는 것이 좋습니다. –

당신은 CSS에서 플렉스 스타일을 사용할 수 있습니다 않습니다. align-items : flex-end는 모든 입력 상자를 아래에서 위로 정렬하지 않습니다. 그러면 더 좋아질 것입니다.

<div class="container"> 
    <div class="row"> 
    <form> 
     <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> 
    </form> 
    </div> 
</div> 

form { 
    display: flex; 
    flex-direction: row; 
    align-items: flex-end; 
}

출처

2017-12-19 07:03:56 Sanau

내 라벨이 2 줄에 도달했을 때 레이아웃 수정 방법

답변

관련 문제