Bao bọc văn bản bên trong phần tử input type = “text” HTML / CSS

HTML được hiển thị bên dưới,

<input type="text"/>

được hiển thị trong một trình duyệt như sau:

Con cáo nâu nhanh nhẹn nhảy qua thân con chó lười.

Sử dụng HTML bên dưới,

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

nó được hiển thị trong một trình duyệt như sau:

Đó là textareacông việc của - để nhập văn bản nhiều dòng. Người input sẽ không làm điều đó ; nó không được thiết kế để làm điều đó.

Vì vậy, sử dụng a textarea. Bên cạnh sự khác biệt về hình ảnh, chúng được truy cập qua JavaScript theo cùng một cách (sử dụng thuộc valuetính).

Bạn có thể ngăn dòng mới được nhập qua inputsự kiện và chỉ cần sử dụng một replace(/\n/g, '').

Word Break sẽ bắt chước một số ý định

    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" />

Như một giải pháp thay thế, giải pháp này đã mất hiệu quả trên một số trình duyệt. Vui lòng kiểm tra bản demo: http://cssdesk.com/dbCSQ

Bạn không thể sử dụng đầu vào cho nó, thay vào đó bạn cần sử dụng textarea. Sử dụng textarea với wrap="soft"mã và tùy chọn phần còn lại của các thuộc tính như sau:

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

Thuộc tính : Để giới hạn số lượng văn bản trong đó, chẳng hạn như "40" ký tự, bạn có thể thêm thuộc tính maxlength="40"như sau: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Để ẩn kiểu cuộn cho nó. nếu bạn chỉ sử dụng overflow:scroll;hoặc overflow:hidden;hoặc overflow:auto;nó sẽ chỉ ảnh hưởng đến một thanh cuộn. Nếu bạn muốn các thuộc tính khác nhau cho mỗi thanh cuộn thì hãy sử dụng các thuộc tính như thế này overflow:scroll; overflow-x:auto; overflow-y:hidden;trong vùng kiểu: Để làm cho vùng văn bản không thể thay đổi kích thước, bạn có thể sử dụng kiểu resize:none;như sau:

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

Bằng cách đó, bạn có thể có hoặc ví dụ một vùng văn bản có 14 hàng và 10 cols có bọc từ và độ dài ký tự tối đa là "40" ký tự hoạt động chính xác như hộp văn bản đầu vào nhưng với các hàng thay thế và không sử dụng văn bản đầu vào.

LƯU Ý: textarea hoạt động với các hàng không giống như đầu vào <input type="text" name="tbox" size="10"></input>được tạo ra để hoàn toàn không hoạt động với các hàng.

Để tạo một đầu vào văn bản trong đó giá trị bên dưới là một chuỗi dòng đơn nhưng được hiển thị cho người dùng ở định dạng bao bọc từ, bạn có thể sử dụng thuộc tính contenteditable trên một <div>hoặc phần tử khác:

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>