<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
Làm cách nào để nhận văn bản như thế này để gói trong CSS?Làm thế nào để bọc văn bản bằng cách sử dụng CSS?
Hãy thử thực hiện việc này. Làm việc cho IE8, FF3.6, Chrome
<body>
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
</tr>
</table>
</body>
Điều này không hiệu quả đối với tôi, nhưng câu trả lời của @ Stirling bên dưới đã hoạt động. – Zarepheth
kiểm tra nó myslef và nó hoạt động tuyệt vời! tôi giả định rằng "vấn đề" duy nhất ở đây, là bạn phải đặt thủ công kích thước của vùng chứa (100px trong ví dụ này) – ymz
Điều này cũng hoạt động: . cắt ngắn { chiều rộng: 250px; không gian trắng: bẻ cong; tràn: bị ẩn; tràn văn bản: dấu ba chấm; } –
Với text-wrap, hỗ trợ trình duyệt tương đối yếu (như bạn có thể mong đợi từ thông số dự thảo).
Bạn nên thực hiện các bước để đảm bảo dữ liệu không có chuỗi dài không gian trắng.
"Để tránh một số lỗi hiển thị, vui lòng không nhập từ dài." Đó có thực sự là câu trả lời của bạn không? – SandRock
@SandRock - Không, không phải vậy. Đó là một sự hiểu lầm của * một nửa * của câu trả lời này. Các dữ liệu trong câu hỏi, trong khi là một "chuỗi dài không gian trắng" không phải là một "từ". "thực hiện các bước" cũng không có nghĩa là "không nhập", chúng tôi không biết dữ liệu đến từ đâu, nó có thể có nghĩa là thử nghiệm đầu vào của người dùng cho sự tỉnh táo và hiển thị thông báo lỗi cho nội dung không phù hợp. – Quentin
Các lựa chọn tốt hơn nếu bạn không thể kiểm soát đầu vào người sử dụng, nó là thiết lập thuộc tính css, overflow: hidden, vì vậy nếu chuỗi là vượt trội so với chiều rộng, nó sẽ không biến dạng thiết kế.
được sửa đổi:
Tôi thích câu trả lời: "word-wrap: break-word", và đối với những trình duyệt không hỗ trợ nó, ví dụ, IE6 hoặc IE7, tôi sẽ sử dụng giải pháp của tôi.
Nếu bạn định sử dụng tùy chọn này, hãy đảm bảo đặt chiều rộng cho phần tử chứa văn bản hoặc tràn: ẩn sẽ chỉ ẩn luồng thừa, không bao bọc nó. – jay
Nếu bạn gõ "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" này sẽ sản xuất:
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
tôi đã lấy ví dụ của tôi từ một vài trang web khác nhau trên google. Tôi đã thử nghiệm điều này trên ff 5.0, IE 8.0 và Chrome 10. Nó hoạt động trên tất cả chúng.
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword"></td>
</tr>
</table>
Tôi đã thêm "word-wrap: break-word;" nhưng didnt làm việc không trong Firefox cũng không trong IE (tôi đã thử nghiệm chỉ trong hai) ... n khi tôi thêm tất cả các tùy chọn bạn đề nghị .. nó làm việc ... Cảm ơn! – UID
Tôi phải thêm "không gian trắng: -webkit-pre-wrap;" để tải phiên bản Chrome mới (và có thể là Safari) để hoạt động. – George
cảm ơn, nó đã hoạt động! bootstrap đã làm một việc riêng của mình, và không có gì giúp đỡ. Cuối cùng là giải pháp phù hợp với tôi. –
Điều này sẽ hoạt động ở mọi nơi.
<BODY>
<TABLE style="table-layout:fixed;">
<TR>
<TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD>
</TR>
</TABLE>
</BODY>
Không có nhiều người tận dụng các yếu tố như thế nữa, anh bạn. –
Không phải CSS không phải là câu trả lời nhưng sử dụng trường văn bản để giữ nó ... chỉ cần nói –
Eugh. Các đầu vào ở đó để hiển thị đầu vào. Tôi nghĩ chúng tôi đã vượt qua được những câu hỏi ngữ nghĩa cho các mục đích hiện tại. – Quentin