Zawijanie tekstu wewnątrz elementu input type = „tekst” HTML / CSS

98

HTML pokazany poniżej,

<input type="text"/>

jest wyświetlany w przeglądarce w następujący sposób:

Kiedy dodam następujący tekst,

Szybki brązowy lis przeskoczył nad leniwym psem.

Korzystając z poniższego kodu HTML,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

jest wyświetlany w przeglądarce takiej jak:

Ale chciałbym, żeby był wyświetlany w takiej przeglądarce:

Chcę, aby tekst w moim elemencie wejściowym był zawijany. Czy można to osiągnąć bez textarea?

html input word-wrap Projektant stron internetowych
źródło
3
Nie, nie sądzę, że może. Ale dlaczego textarea nie wchodzi w grę?
Pekka
37
Używanie pola tekstowego czasami nie jest opcją, ponieważ nie chcesz zezwalać na wprowadzanie wielu wierszy tekstu. Wystarczy zawinąć jeden wiersz tekstu (uwaga: to nie to samo).
Flatliner DOA,
Jest rozwiązanie omówione dokładnie w tym celu w CSSWG do standaryzacji, niestety nie mogę znaleźć problemu.
Null
Znalazłem to; github.com/w3c/csswg-drafts/issues/2141
Null
1
@Pekka 웃 nie to, że jest to istotne, ale jest kilka powodów: nie możemy używać walidacji html5 na obszarach tekstowych; nie możemy używać ograniczeń wzorca do walidacji obszarów tekstowych; obszar tekstu jest niepotrzebnym synonimem dla typu wejściowego = tekst (jest to dane wejściowe, które jest tekstem!), co oznacza dwukrotność stylizacji itp., itd. Krótko mówiąc, jest wiele powodów.
Peter Kionga-Kamau

Odpowiedzi:

64

To jest textareajego zadanie - wielowierszowe wprowadzanie tekstu. input Nie zrobi ; nie został do tego przeznaczony.

Więc użyj textarea . Oprócz różnic wizualnych, dostęp do nich można uzyskać za pomocą JavaScript w ten sam sposób ( valuewłaściwość use ).

Możesz uniemożliwić wprowadzanie nowych linii za pośrednictwem inputwydarzenia i po prostu używając replace(/\n/g, '').

Alex
źródło
74
To naprawdę nie odpowiada na pytanie, jak zebrać pojedynczy wiersz danych wejściowych podczas wyświetlania go zawiniętego podczas wprowadzania.
ehdv
3
Głównym problemem jest to, że obszar tekstowy blokuje przycisk start na urządzeniach mobilnych.
Dan
2
@alex Dokładnie. Więc jeśli potrzebujesz prawdziwego wejścia wielowierszowego, to obszar tekstowy jest lepszy, ale jeśli chcesz tylko wpisywać zawijane słowa, rozwiązanie CSS jest lepsze.
Dan
1
Już miałem powiedzieć, że <textarea>nie będzie współpracować z rzeczy jak autouzupełniania jQuery, ale wystarczy zmienić <input>się <textarea>i to wszystko, co jest niezbędne. Brawo za standardy!
Sablefoste
9
Jak wspomniano powyżej: Zawijanie linii! == ciąg wieloliniowy. Nie jestem pewien, dlaczego jest to akceptowana odpowiedź, ponieważ nie odpowiada na pytanie.
mattLummus
36

Słowo Break będzie naśladować część intencji

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />
Rozwiń fragment

Aby obejść ten problem, to rozwiązanie straciło skuteczność w niektórych przeglądarkach. Sprawdź demo: http://cssdesk.com/dbCSQ

Thiago Macedo
źródło
7
Właśnie przetestowałem to w przeglądarce Firefox 43.0.4 i nie działa, jednak w Safari 9 i Chrome 48 wygląda na to, że działa: cssdesk.com/dbCSQ
Jason Sperske
6
Załączone demo autorstwa @JasonSperske nie działa dla mnie ani w Firefoksie 45, ani w Chrome 50.
czerny
Demo działa dla mnie w chrome 48 na Linuksie, ale ten sam CSS na mojej własnej stronie nie.
Mnebuerquo
43
Rozwiązanie stało się przestarzałe przynajmniej od Chrome 50 :(
userlond
5
Zapomnij o tym rozwiązaniu: nie działa z Chrome 74/75, Firefox 63/67, Edge 42, IE 11 i UCBrowser 7.0 (ale działa z GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
11

Można nie używać wejście do niego, trzeba użyć zamiast textarea. Użyj textarea z wrap="soft"kodem i opcjonalnych pozostałych atrybutów, takich jak ten:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atrybuty: Aby ograniczyć ilość zawartego w nim tekstu, na przykład do „40” znaków, możesz dodać atrybut w maxlength="40"następujący sposób: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Aby ukryć styl przewijania. jeśli użyjesz tylko overflow:scroll;lub overflow:hidden;lub overflow:auto;będzie to miało wpływ tylko na jeden pasek przewijania. Jeśli chcesz mieć różne atrybuty dla każdego paska przewijania, użyj atrybutów takich jak ten overflow:scroll; overflow-x:auto; overflow-y:hidden;w obszarze stylu: Aby uniemożliwić zmianę rozmiaru obszaru tekstu, możesz użyć stylu w resize:none;następujący sposób:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

W ten sposób możesz mieć lub przykładowo obszar tekstu z 14 wierszami i 10 kolumnami z zawijaniem wyrazów i maksymalną długością znaków wynoszącą „40”, który działa dokładnie tak samo, jak pole tekstu wejściowego, ale z wierszami i bez użycia tekstu wejściowego.

UWAGA: textarea działa z wierszami w przeciwieństwie do danych wejściowych, <input type="text" name="tbox" size="10"></input>które nie mają działają z wierszami.

SeekLoad
źródło
7

Aby utworzyć tekst wejściowy, w którym wartość pod maską jest ciągiem jednowierszowym, ale jest prezentowana użytkownikowi w formacie zawijanym w słowa, możesz użyć atrybutu contenteditable na jednym <div>lub innym elemencie:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>
Rozwiń fragment

Sam Herrmann
źródło