การตัดข้อความภายในประเภทอินพุต = องค์ประกอบ "ข้อความ" HTML / CSS

HTML ที่แสดงด้านล่าง

<input type="text"/>

จะปรากฏในเบราว์เซอร์ดังนี้:

สุนัขจิ้งจอกสีน้ำตาลได้อย่างรวดเร็วเพิ่มขึ้นกว่าสุนัขขี้เกียจ.

โดยใช้ HTML ด้านล่าง

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

จะปรากฏในเบราว์เซอร์ดังนี้:

นั่นคือtextareaงานของ - สำหรับการป้อนข้อความหลายบรรทัด input จะไม่ทำมัน ; มันไม่ได้ออกแบบมาให้ทำ

ดังนั้นใช้ไฟล์textarea. นอกจากความแตกต่างของภาพแล้วยังเข้าถึงผ่าน JavaScript ในลักษณะเดียวกัน (ใช้valueคุณสมบัติ)

คุณสามารถป้องกันการขึ้นบรรทัดใหม่ผ่านทางไฟล์ inputกิจกรรมและใช้ไฟล์replace(/\n/g, '').

Word Break จะเลียนแบบเจตนาบางอย่าง

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

วิธีแก้ปัญหาคือโซลูชันนี้สูญเสียประสิทธิภาพในเบราว์เซอร์บางตัว โปรดตรวจสอบการสาธิต: http://cssdesk.com/dbCSQ

คุณไม่สามารถใช้อินพุตได้คุณต้องใช้ textarea แทน ใช้ textarea กับwrap="soft"โค้ดและไม่บังคับส่วนที่เหลือของแอตทริบิวต์ดังนี้:

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

แอตทริบิวต์:หากต้องการ จำกัด จำนวนข้อความในข้อความตัวอย่างเช่น "40" อักขระคุณสามารถเพิ่มแอตทริบิวต์maxlength="40"ดังนี้: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> หากต้องการซ่อนการเลื่อนสไตล์ให้ หากคุณใช้เพียงoverflow:scroll;หรือoverflow:hidden;หรือoverflow:auto;จะมีผลกับแถบเลื่อนเดียวเท่านั้น หากคุณต้องการแอตทริบิวต์ที่แตกต่างกันสำหรับแถบเลื่อนแต่ละแถบให้ใช้แอตทริบิวต์เช่นนี้overflow:scroll; overflow-x:auto; overflow-y:hidden;ในพื้นที่รูปแบบ: ในการทำให้พื้นที่ข้อความไม่สามารถปรับขนาดได้คุณสามารถใช้ลักษณะresize:none;ดังนี้:

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

ด้วยวิธีนี้คุณสามารถมีหรือเป็นตัวอย่างพื้นที่ข้อความที่มี 14 แถวและ 10 คอลัมน์พร้อมการตัดคำและความยาวอักขระสูงสุด "40" อักขระที่ทำงานเหมือนกับกล่องข้อความอินพุต แต่มีแถวแทนและไม่ต้องใช้ข้อความอินพุต

หมายเหตุ: textarea ทำงานกับแถวที่แตกต่างจากอินพุต<input type="text" name="tbox" size="10"></input>ที่สร้างขึ้นเพื่อไม่ทำงานกับแถวเลย

ในการสร้างอินพุตข้อความซึ่งค่าที่อยู่ใต้ฝากระโปรงเป็นสตริงบรรทัดเดียว แต่นำเสนอให้กับผู้ใช้ในรูปแบบที่ห่อด้วยคำคุณสามารถใช้แอตทริบิวต์contenteditableใน<div>องค์ประกอบหรือองค์ประกอบอื่น ๆ :

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>