ブートストラップcol-mdはラベルのテキストを切り捨てます

ラベルがある長さを超え、テキストが他の要素の下にあるときに問題があります。ここでブートストラップcol-mdはラベルのテキストを切り捨てます

は絵です：form input

私はラベルのテキスト全体を見ることにしたいです。私はブートストラップからcol-md-1があると思います。そのサイズはほぼすべてのエントリで問題ありません。テキストにスペースがある場合は複数行で表示されますが、文字数の多い単語があれば、そのテキストは入力されています。ここで

はコードです：

<div class="form-group filaCertificado"> 
    <form:label class="control-label col-md-1 nameCertificate" for="certs" path="certs">Cert Name</form:label> 
    <div class="col-md-4"> 
     <input id="file" name="file" class="form-control inputCert" readonly="readonly" /> 
    </div> 
    <label for="upload${status.count}" class="btnCert"> 
     <span class="btn btn-primary btnCert" aria-hidden="true">upload</s:message></span> 
     <input type="file" id="upload" name="upload" style="display:none"> 
    </label> 
    <button type="button" id="btnRepo" class="btn btn-primary btnCert">Repository</button> 
</div>

私はテキスト全体を見るために、このケースでは何ができますか？多分javascriptでサイズをチェックし、CSSを変更しますか？

ありがとうございます！

出典

2016-12-27 Jose Climent

あなたはcssコードを共有することができます – Nandhu

あなたはワードラップをすることができます：これのためのbreak-word CSS。それはあなたのテキストをラップします –

あなたはどちらか

.nameCertificate{ 
 
    word-wrap: break-word; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="form-group filaCertificado"> 
 
    <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs">CertNameisverylong</form:label> 
 
    <div class="col-md -4 col-xs-4 col-sm-4"> 
 
     <input id="file" name="file" class="form-control inputCert" readonly="readonly" /> 
 
    </div> 
 

 
    <label for="upload${status.count}" class="btnCert"> 
 
     <span class="btn btn-primary btnCert" aria-hidden="true">upload</span> 
 
     <input type="file" id="upload" name="upload" style="display:none"> 
 
    </label> 
 
    <button type="button" id="btnRepo" class="btn btn-primary btnCert"> 
 
     Repository 
 
    </button> 
 
    </div> 
 

 
</body> 
 

 
</html>

またはあなたが...表示し、ツールチップ（フルページ幅のビュー）で、完全なラベル名を表示することができますラップ単語を使用してラベルテキストを破ることができる

.nameCertificate{ 
 
white-space: nowrap; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
     height: 40px; 
 

 
}

<!DOCTYPE html> 
 
    <html lang="en"> 
 

 
    <head> 
 
     <title>Bootstrap Example</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 

 
     <div class="form-group filaCertificado"> 
 
     <form:label class="control-label col-xs-1 col-md-1 col-sm-1 nameCertificate" for="certs" path="certs" data-toggle="tooltip" title="CertNameisagoodcertname">CertNameisverylong</form:label> 
 
     <div class="col-md -4 col-xs-4 col-sm-4"> 
 
      <input id="file" name="file" class="form-control inputCert" readonly="readonly" /> 
 
     </div> 
 

 
     <label for="upload${status.count}" class="btnCert"> 
 
      <span class="btn btn-primary btnCert" aria-hidden="true">upload</span> 
 
      <input type="file" id="upload" name="upload" style="display:none"> 
 
     </label> 
 
     <button type="button" id="btnRepo" class="btn btn-primary btnCert"> 
 
      Repository 
 
     </button> 
 
     </div> 
 

 
    </body> 
 

 
    </html>

出典

2016-12-27 12:22:19 Deep

ありがとう、それは非常に有用だった！ –

@JoseClimentようこそ:)喜んで助けてください – Deep

ブートストラップcol-mdはラベルのテキストを切り捨てます

答えて

関連する問題