ฉันจะตัดหรือแบ่งข้อความ / คำยาว ๆ ในช่วงความกว้างคงที่ได้อย่างไร

ฉันต้องการสร้างช่วงที่มีความกว้างคงที่ซึ่งเมื่อฉันพิมพ์สิ่งใด ๆ ในช่วงเช่น<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>สตริงข้อความยาว ๆ ที่ไม่เว้นวรรคคำนั้นจะแบ่งหรือตัดไปที่บรรทัดถัดไป

ความคิดใด ๆ ?

คุณสามารถใช้คุณสมบัติ CSS word-wrap:break-word;ซึ่งจะทำลายคำหากยาวเกินไปสำหรับความกว้างช่วงของคุณ

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

ลองทำตาม css ด้วยการเพิ่มwhite-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

แบบนี้

การสาธิต

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

โดยค่าเริ่มต้น a spanคือไฟล์inlineองค์ประกอบ ... ดังนั้นจึงไม่ใช่ลักษณะการทำงานเริ่มต้น

คุณสามารถสร้างspanพฤติกรรมดังกล่าวได้โดยเพิ่มdisplay: block;ลงใน CSS ของคุณ

span {
    display: block;
    width: 100px;
}

ลองทำตามนี้

span {
    display: block;
    width: 150px;
}

เพียงเพื่อขยายขอบเขตเชิงปฏิบัติของคำถามและเป็นภาคผนวกของคำตอบที่กำหนด: บางครั้งอาจจำเป็นต้องระบุตัวเลือกเพิ่มเติมอีกเล็กน้อย

การกำหนดช่วงเต็มเป็นจอแสดงผล: อินไลน์บล็อกคุณอาจมีปัญหาในการแสดงภาพ

ดังนั้นฉันชอบที่จะกำหนดช่วงดังนี้:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

ในกรณีของฉัน display: block ทำลายการออกแบบตามที่ตั้งใจไว้

max-widthคุณสมบัติเพียงแค่บันทึกฉัน

และสำหรับการจัดแต่งทรงผมคุณสามารถใช้ได้text-overflow: ellipsisเช่นกัน

รหัสของฉันคือ

max-width: 255px
overflow:hidden