Question

当标签超过某个长度时，我遇到问题，文本在其他元素下。

以下是图片：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？

谢谢！

Answer 1

您可以使用自动换行来破坏标签文本

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

Bootstrap col-md剪切标签的文本

1 个答案: