Làm cách nào để tắt gói từ trong HTML?

517

Tôi cảm thấy ngớ ngẩn vì không thể tìm ra điều này, nhưng làm cách nào để tắt wordwrap? thuộc tính css word-wrapcó thể được buộc với break-word, nhưng không thể bị tắt (chỉ có thể được để lại một mình với normalgiá trị).

Làm thế nào để buộc từ quấn tắt ?

html css word-wrap

— Chim Alexander
nguồn

852

Bạn cần sử dụng white-spacethuộc tính CSS .

Đặc biệt, white-space: nowrapvà white-space: prelà những giá trị được sử dụng phổ biến nhất. Cái đầu tiên dường như là thứ bạn đang theo đuổi.

— Jon
nguồn

25

Đã thêm các giá trị cụ thể của bộ webkit ở trên

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

— Matas Vaitkevicius
nguồn

3

Tôi tự hỏi tại sao bạn tìm giải pháp "khoảng trắng" bằng "nowrap" hoặc "pre", nó không thực hiện đúng hành vi: bạn buộc văn bản của mình thành một dòng! Văn bản nên ngắt dòng, nhưng không ngắt từ như mặc định. Điều này được gây ra bởi một số thuộc tính css: word-quấn, overflow-quấn, word-break và hyphens. Vì vậy, bạn có thể có một trong hai:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Vì vậy, giải pháp là loại bỏ chúng hoặc ghi đè chúng bằng "unset" hoặc "normal":

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

CẬP NHẬT: tôi cũng cung cấp bằng chứng với JSfiddle: https://jsfiddle.net/azozp8rr/

— zod
nguồn

1

Tôi hiểu lý do tại sao bạn muốn phá vỡ từ nói chung. Nhưng giả sử không có lý do chính đáng để chuyển từ gói không có ý nghĩa với tôi. Tôi đã nhanh chóng thử kiểm tra giải pháp "không đặt" của bạn và nó vẫn có gói từ. Nếu bạn nghĩ nó nên hoạt động, vui lòng cung cấp bản demo jsfiddle khi nó hoạt động.

— Alexander Bird

Tôi không biết tại sao câu trả lời của tôi biến mất. Một lần nữa, bạn có thể buộc nowrap, thường mọi người làm điều đó cho các nút. Nhưng tôi nghĩ rằng nó là một thiết kế tồi vì lý do đáp ứng, bởi vì các văn bản có thể đi ra ngoài container. Dù sao, câu hỏi là hỏi về từ-quấn: ngắt từ, bị ép buộc và bạn đang hỏi làm thế nào để buộc. Vì vậy, tôi đã cung cấp mã để làm điều đó. Khoảng trắng: nowrap là một thứ khác, và nó không loại bỏ các từ ngắt, nó đang loại bỏ toàn bộ dòng. Ngoài ra tôi cung cấp so sánh các mã với JSfiddle: https://jsfiddle.net/azozp8rr/

— zod

2

Điều này giúp tôi ngăn chặn những giờ nghỉ làm việc ngớ ngẩn xảy ra trong văn bản Chrome

word-break: keep-all;

— Ryan Charmley
nguồn