Wprowadzanie tekstu zawija się na 2 wiersze

Widzę dziwne zachowanie na wejściach tekstowych, są one zawijane na 2 linie, gdy tekst jest zbyt długi.Wprowadzanie tekstu zawija się na 2 wiersze

Mają wypełnienie i mają szerokość 100%. Jeśli usunę jedną z tych 2 reguł CSS, tekst przestanie się owijać.

Nie mogę umieścić mojej aktualnej strony na żywo i kiedy próbuję odtworzyć problem (np. Z jsfiddle), nie mogę go odtworzyć. Oto zrzuty ekranu z mojego iPhone:

enter image description here

Co może być tego przyczyną? Nie jest to zachowanie domyślne, ale wypełnienie i szerokość 100% są wymagane od mojego projektu, więc muszę znaleźć inny sposób zapobiegania zawijaniu.

AKTUALIZACJA Jak już powiedziałem, nie mogę odtworzyć problemu. Moja próba jest poniżej. Ive użył chrome dev narzędzi do skopiowania wszystkich reguł CSS, a html jest taki sam, jednak wynik nie jest zawijany.

http://codepen.io/anon/pen/uHCav

<div class="cont"> 
<div class="one"> 
<input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" > 
    </div> 
    </div> 

.cont { 
    background: grey; 
    width: 300px; 
    margin-left: 100px 
} 
*, *:before, *:after { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
input { 

    border-left-color: #e35235 !important; 

} 
input { 
    border-left-style: solid; 
border-left-color: #c9d8e6; 
border-left-width: 6px !important; 
font-size: 1.2em; 
border-top: none !important; 
border-bottom: none !important; 
border-right: none !important; 
} 
input { 
    background: white; 
} 
input { 
    padding: 15px 37px 15px 14px; 
} 
input { 
    margin: 0; 
border: none; 
outline: none; 
} 
input { 
    width: 100%; 
-webkit-appearance: none; 
appearance: none; 
-moz-border-radius: 0; 
-webkit-border-radius: 0; 
border-radius: 0; 
background-color: transparent; 
} 
input { 
    font-weight: 300; 
} 
input { 
    -webkit-text-fill-color: #19465e; 
} 
input { 
    color: #19465e; 
} 

.one { 
    margin-left: -20px; 
margin-right: -20px; 
}

Źródło

2014-07-11 Evans

Po prostu, czy używasz '"? – Kasyx

Czy możesz dodać dokładne reguły CSS dla tych pól tekstowych? Również każdy dziedziczny CSS. – cephalopodMD

Tak, są – Evans

Zacznij od paring z powrotem dokument.

Utwórz nowy (pusty) Strona tylko z podstawami

<!DOCTYPE html> 
<html> 
<head> 
    <title>My page title</title> 
</head> 
<body> 
    <div class="cont"> 
     <div class="one"> 
      <input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" > 
     </div> 
    </div> 
</body> 
</html>

Uproszczenie wejść CSS, tylko podstawy

input { 
    font-size:1.2em; 
    background:#DDD; 
    padding:15px 37px 15px 14px; 
    border:none; 
    outline:none; 
    width:100%; 
}

zauważysz wejście nie będzie zawijać i nadal masz width: 100%; i dopełnienie.

Dodać resztę dokumentu jednego bitu na raz:

Javascript - sprawdzić, czy nie ma problemu z wejściem
resztę swojego CSS - sprawdzić, czy nie ma problemu z wejściem
Wszelkie pozostałe style dla Twojego wejścia - sprawdzić, czy nie ma problemu z wejściem
Wszelkie brakujące HTML - sprawdzić, czy nie ma problemu z wejściem

Odłóż układankę na części razem po jednym kawałku i oczyść kod w trakcie podróży.

Źródło

2014-07-14 13:46:05 misterManSam

Może być również przydatne, aby uruchomić swój CSS przez [a markup cleaner] (http://www.dirtymarkup.com/) w jakimś rodzaju. – misterManSam

Doskonałe porady dotyczące debugowania, ale nie odpowiada na pytanie. – rvighne

Całkiem słusznie nie. Pośrednio może jednak; a kiedy wysłałem tę odpowiedź, nie było odpowiedzi przez dzień lub dwa. Pomyślałem, że zginę zasady. Zgłoś do usunięcia, jeśli musisz. – misterManSam

Wymień width:100% na position:absolute; left:0; right:0;, jeśli potrzebujesz szybkiej i brudnej poprawki. Tylko upewnij się, że twój kontener div ma odpowiednie reguły.

Na marginesie, naprawdę źle jest mieć wszystkie te reguły wejściowe w osobnych blokach stylów. Spróbuj je skonsolidować w jedno, jeśli to możliwe.

Źródło

2014-07-14 19:37:49

Zwykle tego rodzaju problemy są związane z kontekstem rozmiarów skrzynek.Można próbować określić kontekst granicy do wejścia zignorować obliczenia padding:

input { 
    box-sizing: border-box; 
}

Źródło

2014-07-16 11:44:14 Romain

Rozmiar pudełka ramki border-box nie ignoruje obliczenia wypełnienia, po prostu używa zdefiniowanej szerokości jako zewnętrznych granic elementu. Padding nadal będzie dodawany do elementu, z wyjątkiem tego, że przy "box-sizing: border-box" tekst będzie miał jeszcze mniej miejsca. –

Możesz mieć word-break właściwość, że wejście jest dziedziczenie. Spróbuj dodać word-break: normal; do wejścia.

Źródło

2015-02-19 23:54:43 helloworld

Wprowadzanie tekstu zawija się na 2 wiersze

Odpowiedz

Powiązane problemy