W mojej witrynie ograniczyłem elementy formularza, które mają być w stałym rozmiarze. Jednocześnie pozwoliłem na złamanie tekstu, gdy tekst jest długi i zastanawiam się, czy istnieje sposób na złapanie, czy etykieta faktycznie złamała tekst (więc mogłem odpowiednio dostosować stałą wysokość), czy nie

Należy pamiętać, że sama etykieta pochodzi z serwera (jako zasobów), a strona jest prezentowana na wielu rozdzielczości urządzeń, więc nie mogę przewidzieć, czy tekst pęknie, czy nie

Mój kod wygląda następująco:

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;}

Edytuj:
. Zrobiłem przykładowy przykład do tego, co próbuję osiągnąć https://codepen.io/smallscalearmageddon/pen/eynqjk

Spróbuję wyjaśnić scenariusz bardziej wyraźnie:
Mam formularz w mojej witrynie z kilkoma wejściami, etykietami nad nimi i pod nimi istnieją rozpiętość błędów, które są wstrzykiwane, jeśli i gdy wartość wejściowa jest nieprawda.

Kiedy dzieje się w pewnym wejściu, rozpiętość błędu popycha wejścia pod nim w dół, a graficzny facet powiedział, że jest brzydki, a marża między wejściami powinna zostać naprawiona.

Więc naprawiłem wysokość ({wysokość: 60px;}).

Niestety, etykiety nad wejściami pochodzą z serwera jako zasobów w wielu językach, a niektóre z nich sprawiają, że etykiety tekst są długo, aż włamy się na 2 linie.

Gdy tak się stanie, wyświetlana jest błąd walidacji - rozpiętość błędu nakłada się na etykietę wejścia pod nim.

Więc o czym pytałem:

Czy istnieje sposób na wykrycie, gdy tekst przerwuje do nowej linii, więc odpowiednio naprawiłem jego wysokość

Mam nadzieję, że teraz byłem jasny

css
1
armageddon 22 marzec 2020, 13:31

1 odpowiedź

Najlepsza odpowiedź
.long-label {min-height:60px;}

EDYTOWAĆ:

Ten pióro opiera się na twoim przykładzie: https://codepen.io/Ziad-darwich/pen/ vyoqyq.

2
Ziad Darwich 26 marzec 2020, 11:51