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>