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:
W ten sposób powyższy kod HTML jest wyświetlany w przeglądarce.

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:
W ten sposób powyższy kod HTML jest wyświetlany w przeglądarce.

Ale chciałbym, żeby był wyświetlany w takiej przeglądarce:
Tak chciałbym, aby powyższy HTML był wyświetlany w 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

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