Bootstrap col-md вырезает текст метки

У меня проблема, когда метка превышает некоторую длину, текст находится под другими элементами.

Вот картинка: форма ввода

Я хочу, чтобы весь текст этикетки был виден. I think is the col-md-1 from bootstrap. Этот размер подходит почти для каждой записи, и если в тексте есть пробелы, он отображается в многострочном формате, но если есть целое слово с большим количеством символов, текст находится под вводом de.

Вот код:

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

Спасибо!

1 ответ

  1. Можно либо прервать текст метки с помощью word wrap

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