Bootstrap col-md剪切标签的文本

问题描述：

当标签超过某个长度时，我遇到问题，文本位于其他元素下。Bootstrap col-md剪切标签的文本

这里是图片：form input

我希望标签的全部文本待观察。我认为是bootstrap的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？

谢谢！

你能分享一下css代码吗 – Nandhu

你可以用用户自动换行：break-word css for this。它会包裹你的文字 –

答

您可以通过破解使用文字标签文本换

.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>

非常感谢，这非常有帮助！ –

@JoseCliment欢迎:)高兴地帮助 – Deep

Bootstrap col-md剪切标签的文本

相关推荐