Làm cách nào tôi có thể bọc hoặc ngắt văn bản / từ dài trong một khoảng chiều rộng cố định?

Tôi muốn tạo một khoảng với chiều rộng cố định mà khi tôi nhập bất kỳ thứ gì trong khoảng như <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, một chuỗi dài văn bản không có khoảng cách, (các) từ ngắt hoặc quấn sang dòng tiếp theo.

Bất kỳ ý tưởng?

Bạn có thể sử dụng thuộc tính CSS word-wrap:break-word;, thuộc tính này sẽ ngắt các từ nếu chúng quá dài so với chiều rộng nhịp của bạn.

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Hãy thử làm theo css với việc bổ sung white-space:

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

Như thế này

BẢN GIỚI THIỆU

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

Theo mặc định, a spanlà một inlinephần tử ... vì vậy đó không phải là hành vi mặc định.

Bạn có thể thực hiện spanhoạt động theo cách đó bằng cách thêm display: block;vào CSS của mình.

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

Thử cái này

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

Chỉ để mở rộng phạm vi thực tế của câu hỏi và như một phụ lục cho các câu trả lời đã cho: Đôi khi người ta có thể thấy cần phải chỉ định các bộ chọn nhiều hơn một chút.

Bằng cách xác định khoảng thời gian đầy đủ là hiển thị: khối nội tuyến, bạn có thể gặp khó khăn khi hiển thị hình ảnh.

Do đó, tôi muốn xác định một khoảng như vậy:

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;
}

Trong trường hợp của tôi, khối display: đã phá vỡ thiết kế như dự kiến.

Tài max-widthsản vừa cứu tôi.

và để tạo kiểu, bạn cũng có thể sử dụng text-overflow: ellipsis.

mã của tôi là

max-width: 255px
overflow:hidden