Có cách nào để bọc từ dài trong div không?


173

Tôi biết Internet Explorer có kiểu bao bọc từ, nhưng tôi muốn biết liệu có một phương pháp trình duyệt chéo nào để làm như vậy để nhắn tin trong div không.

Tốt nhất là CSS nhưng đoạn mã JavaScript cũng hoạt động tốt.

chỉnh sửa: Yeah, đề cập đến chuỗi dài, chúc mừng mọi người!


7
Word gói xảy ra theo mặc định. Bạn có nghĩa là gói khi có không phải là từ riêng biệt?
Quentin

Câu trả lời:


313

Đọc bình luận ban đầu, rutherford đang tìm kiếm một cách trình duyệt chéo để bọc văn bản không bị gián đoạn (được suy ra bằng cách sử dụng gói từ cho IE, được thiết kế để phá vỡ các chuỗi không bị gián đoạn).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Bây giờ tôi đã sử dụng lớp học này một chút và hoạt động như một cơ duyên. (lưu ý: Tôi chỉ thử nghiệm trong FireFox và IE)


Bài đăng cũ, nhưng nó không xuất hiện để hiển thị khoảng trắng khi IE ở chế độ quirks.
Jeremy

2
Tôi đang sử dụng Firefox 24.6.0 và đây word-wrap: break-wordlà những gì thực sự hoạt động.
dùng545424

3
Word-wrap: break-wordmặc dù được tạo bởi Microsoft hiện là một phần của tiêu chuẩn CSS 3 và đó là mẹo gì :-)
Pascal_dher 6/2/2015

38

Hầu hết các câu trả lời trước đó không hoạt động với tôi trong Firefox 38.0.5. Điều này đã ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Tài liệu:


2
cảm ơn! đây là chỉ trả lời rằng làm việc (word-break: tan vỡ tất cả; là những gì làm việc với tôi)
DaniCE


12

Giải pháp của Aaron Bennet đang hoạt động hoàn hảo với tôi, nhưng tôi đã phải xóa dòng này khỏi mã của anh ấy -> white-space: -pre-wrap;vì nó đã báo lỗi, vì vậy mã làm việc cuối cùng là như sau:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Cảm ơn rât nhiều


1
Aaron Bennett đã đề cập đến câu trả lời tương tự 2 năm trước bạn. những gì bạn đã làm ở đây không thêm giá trị.
AaA

6
Xin chào, như bạn có thể thấy nếu bạn đọc lại cả hai câu trả lời, điều tôi đang nói chỉ là giải pháp của Aaron là ổn, nhưng tôi đã gặp lỗi ở một trong những dòng anh ấy viết, vì vậy tôi chỉ thay đổi nó thành giải pháp hiệu quả cho tôi. Có lẽ tôi nên bình luận trong câu trả lời của anh ấy, tôi biết điều đó, xin lỗi và cảm ơn
Hugo

Tôi đã phải thêm "khoảng trắng: -pre-quấn" này và nó đã hoạt động :)
Ravi Khambhati

0

Như david đề cập, DIV làm từ bọc theo mặc định.

Nếu bạn đang đề cập đến các chuỗi văn bản thực sự dài mà không có khoảng trắng, thì những gì tôi làm là xử lý phía máy chủ chuỗi và chèn các nhịp trống:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Nó không chính xác vì có vấn đề với kích thước phông chữ và như vậy. Tùy chọn span hoạt động nếu container có kích thước thay đổi. Nếu đó là một thùng chứa có chiều rộng cố định, bạn có thể tiếp tục và chèn ngắt dòng.


@TomHert thật là kỳ quặc. Mặc dù, tốt, IE. Nó không bao giờ hoạt động. Điều đó nói rằng, điều này đã được đăng 5 năm trước. CSS3 hiện có một số tùy chọn gói từ tốt hơn mà IE có thể bổ sung cho developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.

Vâng tôi biết, tôi đã bị sốc bởi sự đơn giản của giải pháp này mà tôi đã phải thử nó :)
Tom Hert

0

Bạn có thể thử chỉ định chiều rộng cho div, cho dù đó là pixel, tỷ lệ phần trăm hoặc ems và tại thời điểm đó, div sẽ giữ nguyên chiều rộng đó và văn bản sẽ tự động bao quanh trong div.


Hãy thử đặt chiều rộng 10px ... và sau đó sử dụng một từ dài hơn 10px
Paul Zahra
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.