css - элемент стиля для разорванного текста (пробел: нормальный) - PullRequest
1 голос
/ 22 марта 2020

На своем сайте я ограничил размер компонентов формы фиксированным размером. в то же время я позволил метке разбивать текст, когда текст длинный, и мне интересно, есть ли способ узнать, действительно ли метка разбила текст (чтобы я мог соответственно отрегулировать фиксированную высоту) или нет

обратите внимание, что сама метка исходит от сервера (как ресурса), и сайт представлен на многих разрешениях устройств, поэтому я не могу предсказать, будет ли текст поврежден или нет

мой код выглядит следующим образом :

HTML

    <form>
     <div class="long-label">
       <label for="question1">What is your name?</label>
       <input id="question1" name="question1" >
       <span class="error" data-for="question1"></span>
     </div>

     <div class="long-label">
       <label for="question2">What is your favourite colour?</label>
       <input id="question2" name="question2" >
       <span class="error" data-for="question2"></span>
     </div>
    </form>

CSS

    .long-label {height:60px;}
    .long-label label { white-space:normal;}

РЕДАКТИРОВАТЬ:
I ' Мы сделали пример кода для того, чего я пытаюсь достичь https://codepen.io/smallscalearmageddon/pen/eYNQGJK

Я попытаюсь объяснить сценарий более четко:
У меня есть форма на моем сайте с несколько входов, метки над ними и под ними есть интервалы ошибок, которые вводятся, если и когда значение ввода недопустимо.

Когда это происходит с определенным входом, диапазон ошибок толкает входы под ним, и парень из Graphi c говорит, что это некрасиво, и разница между входами должна быть фиксированной.

, поэтому я установил высоту ({height: 60px;}).

к сожалению, над входами метки приходят с сервера как ресурсы на многих языках, и некоторые из них делают текст меток очень длинным, пока он не разбивается на 2 строки.

когда это происходит + отображается ошибка проверки - диапазон ошибок перекрывает метку входа под ним.

так что я спрашивал:

есть ли способ определить, когда текст разбивается на новую строку, чтобы я мог соответственно зафиксировать его высоту

Надеюсь, я был очистить сейчас

1 Ответ

2 голосов
/ 22 марта 2020
.long-label {min-height:60px;}

РЕДАКТИРОВАТЬ:

Эта ручка основана на вашем примере: https://codepen.io/ziad-darwich/pen/vYOQpyQ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...