Hướng dẫn how do i stop breaking text in css? - làm thế nào để tôi ngừng ngắt văn bản trong css?

Question

Thuộc tính CSS white-space kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng. Hãy nói rằng bạn có HTML chính xác như thế này:

Nội dung chính Show

Không có bọc
Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)
Làm cách nào để giữ văn bản trong một dòng trong CSS?
Làm thế nào để bạn làm cho các từ không bị vỡ?
Làm cách nào để dừng phá vỡ văn bản trong HTML?
Làm cách nào để ngừng gói văn bản?


  A bunch of words you see.

Bạn đã tạo kiểu cho div để có chiều rộng được thiết lập là 100px. Ở kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với 100px. Không làm bất cứ điều gì, giá trị white-space mặc định là normal và văn bản sẽ kết thúc. Xem ví dụ dưới đây hoặc theo dõi tại nhà với bản demo.

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

nếu bạn muốn ngăn văn bản kết thúc, bạn có thể áp dụng white-space: nowrap;

If you want to prevent the text from wrapping, you can apply white-space: nowrap;

Hướng dẫn how do i stop breaking text in css? - làm thế nào để tôi ngừng ngắt văn bản trong css?

Thông báo trong ví dụ mã HTML ở đầu bài viết này, thực tế có hai lần ngắt dòng, một lần trước dòng văn bản và một lần sau, cho phép văn bản nằm trên dòng riêng của nó (trong mã). Khi văn bản hiển thị trong trình duyệt, những dòng đó bị vỡ xuất hiện như thể chúng bị loại bỏ. Cũng bị tước bỏ là các không gian bổ sung trên dòng trước chữ cái đầu tiên. Nếu chúng tôi muốn buộc trình duyệt hiển thị các lỗi dòng đó và các ký tự không gian trắng, chúng tôi có thể sử dụng white-space: pre;

Nó được gọi là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

0 vì hành vi như thể bạn đã quấn văn bản trong các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

1 (theo mặc định, xử lý không gian trắng và dòng phá vỡ theo cách đó). Không gian trắng được tôn vinh chính xác như trong HTML và văn bản không kết thúc cho đến khi có một dòng ngắt trong mã. Điều này đặc biệt hữu ích khi hiển thị mã theo nghĩa đen, mang lại lợi ích về mặt thẩm mỹ từ một số định dạng (và đôi khi là hoàn toàn quan trọng, như trong các ngôn ngữ phụ thuộc vào không gian trắng!)

Có lẽ bạn thích cách

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

0 tôn vinh không gian trắng và phá vỡ, nhưng bạn cần văn bản để bọc thay vì có khả năng thoát ra khỏi thùng chứa cha mẹ của nó. Đó là những gì

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

3 dành cho:

Cuối cùng,

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

4 sẽ phá vỡ các dòng nơi chúng bị hỏng trong mã, nhưng thêm không gian trắng vẫn bị tước.

Thật thú vị, sự phá vỡ dòng cuối cùng không được vinh danh. Theo thông số CSS 2.1: Các dòng bị hỏng tại các ký tự mới được bảo tồn và khi cần thiết để điền vào các hộp dòng. Vì vậy, có lẽ điều đó có ý nghĩa.

Dưới đây là một bảng để hiểu các hành vi của tất cả các giá trị khác nhau:

	Dòng mới	Không gian và tab	Văn bản gói
`normal`	Sụp đổ	Sụp đổ	Bọc
`div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }` 0	Bảo tồn	Bảo tồn	Không có bọc
`div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }` 7	Sụp đổ	Sụp đổ	Không có bọc
`div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }` 8	Bảo tồn	Bảo tồn	Bọc
`div { /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; }` 9	Bảo tồn	Sụp đổ	Bọc

Bảo tồn

Không có bọc

Trong CSS3, thuộc tính white-space thực sự sẽ tuân theo biểu đồ đó và ánh xạ các thuộc tính thành
```
no-breaks-here
```
1 và
```
no-breaks-here
```
2 theo đó.
Thêm thông tin
Tài sản CSS
```
no-breaks-here
```
3 (DigitalOcean)

Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)

Tài liệu Mozilla	Hỗ trợ trình duyệt	I E	Bờ rìa	Firefox	Trình duyệt Chrome
Cuộc đi săn	Opera	Opera	Opera	Opera	Opera

8+	Tất cả các	Android chrome	Android Firefox	Trình duyệt Android
Opera	Opera	Opera	Opera	Opera

Source: caniuse

Chủ đề này trống rỗng.

Xem 9 bài viết - 1 đến 9 (tổng cộng 9)

Bài viết
Xem 9 bài viết - 1 đến 9 (tổng cộng 9) #156282
http://stagedecommerce.webeclectic.com/
Diễn đàn ‘CSS, được đóng lại cho các chủ đề và trả lời mới.
Làm cách nào để giữ văn bản trong một dòng trong CSS? #156284

__
Người tham gia
Tại sao tôi sẽ bọc từng từ bị xâm phạm khi tôi chỉ có thể thêm một thẻ BR?

Tôi không chắc là tôi hiểu. Bạn sẽ bọc các từ riêng lẻ để thuộc tính
```
div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}
```
7 chỉ áp dụng cho chúng, thay vì cho toàn bộ văn bản (mà tôi thu thập, không phải là thứ bạn muốn).
Làm thế nào để thêm một thẻ
```
no-breaks-here
```
9 giúp ngăn ngừa ngắt dòng?
```
no-breaks-here
```
Đảm bảo bất kỳ văn bản chính đáng nào nằm trong một thùng chứa có chiều rộng tối thiểu
Đó là những gì tôi đang tìm kiếm! Tôi biết có một tài sản khác cần thiết để hỗ trợ Nowrap.

Đề xuất đó có nghĩa là cho vấn đề vấn đề về văn bản-text-in-Narrow-cột xấu xí của người Viking. Nó không ảnh hưởng đến việc gói văn bản ở tất cả. #156289
__
Người tham gia
http://jknetdesign.com/images/bluopal-forum.png
Ngày 1 tháng 6 năm 2015 lúc 4:44 AM #203031
Nó khá lâu kể từ khi điều này được hỏi, nhưng, dù sao, có lẽ ai đó tìm thấy nó. Những gì JKnetDesign đang tìm kiếm, tôi nghĩ, là:
-Webkit-hyphens: Không có; -Moz-hyphens: Không có; Bạch chất: Không có;
Ngày tốt.
Ngày 2 tháng 6 năm 2015 lúc 8:10 AM #203093 #156335
__
Người tham gia
Tôi đã làm về quy tắc dấu gạch nối.
Cảm ơnwords that you don’t want to break.
```
This is my paragraph.  It will wrap normally, except for the part about happily-hyphenated-hillbillies.
```
Có văn bản chính đáng sẽ là một cơn ác mộng trên một trang web phản hồi - hoặc với các cột hẹp.
Ừ. Ít nhất, hãy đảm bảo bất kỳ văn bản chính đáng nào nằm trong một thùng chứa có chiều rộng tối thiểu.
Ngày 17 tháng 11 năm 2013 lúc 3:11 chiều #156340 #156340
__
Người tham gia
Tại sao tôi sẽ bọc từng từ bị xâm phạm khi tôi chỉ có thể thêm một thẻ BR?
Tôi không chắc là tôi hiểu. Bạn sẽ bọc các từ riêng lẻ để thuộc tính
```
div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}
```
7 chỉ áp dụng cho chúng, thay vì cho toàn bộ văn bản (mà tôi thu thập, không phải là thứ bạn muốn).
Làm thế nào để thêm một thẻ
```
no-breaks-here
```
9 giúp ngăn ngừa ngắt dòng?
Đảm bảo bất kỳ văn bản chính đáng nào nằm trong một thùng chứa có chiều rộng tối thiểu
Đó là những gì tôi đang tìm kiếm! Tôi biết có một tài sản khác cần thiết để hỗ trợ Nowrap.
Đề xuất đó có nghĩa là cho vấn đề vấn đề về văn bản-text-in-Narrow-cột xấu xí của người Viking. Nó không ảnh hưởng đến việc gói văn bản ở tất cả.

Ngày 1 tháng 6 năm 2015 lúc 4:44 AM #203031 #203031
Nó khá lâu kể từ khi điều này được hỏi, nhưng, dù sao, có lẽ ai đó tìm thấy nó. Những gì JKnetDesign đang tìm kiếm, tôi nghĩ, là:
-Webkit-hyphens: Không có; -Moz-hyphens: Không có; Bạch chất: Không có;
-moz-hyphens: none;
hyphens: none;
Ngày tốt.
Ngày 2 tháng 6 năm 2015 lúc 8:10 AM #203093 #203093
Tôi đã làm về quy tắc dấu gạch nối.
Cảm ơn
Ngày 2 tháng 6 năm 2015 lúc 8:21 AM #203094 #203094
Ngày 30 tháng 4 năm 2017 lúc 5:43 sáng #254347 #254347
Tôi đã tìm thấy nó! Cảm ơn, đã làm thủ thuật.
Tác giả
Bài viết

Xem 9 bài viết - 1 đến 9 (tổng cộng 9)

Diễn đàn ‘CSS, được đóng lại cho các chủ đề và trả lời mới.

Làm cách nào để giữ văn bản trong một dòng trong CSS?

Nếu bạn muốn giới hạn độ dài văn bản ở một dòng, bạn có thể cắt dòng, hiển thị dấu chấm lửng hoặc chuỗi tùy chỉnh. Tất cả những điều này có thể được thực hiện với thuộc tính dòng văn bản CSS, xác định cách thức nội dung tràn phải được báo hiệu cho người dùng.clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

Làm thế nào để bạn làm cho các từ không bị vỡ?

Word tự động phá vỡ văn bản tại một không gian hoặc dấu gạch nối ở cuối dòng.Để giữ hai từ hoặc một từ được gạch nối với nhau trên một dòng, bạn có thể sử dụng một không gian không phá vỡ hoặc dấu gạch nối không phá vỡ thay vì không gian thông thường hoặc dấu gạch nối.Nhấp vào nơi bạn muốn chèn không gian không phá vỡ.use a nonbreaking space or nonbreaking hyphen instead of a regular space or hyphen. Click where you want to insert the nonbreaking space.

Làm cách nào để dừng phá vỡ văn bản trong HTML?

: Yếu tố văn bản không phá vỡ lưu ý rằng tính năng này có thể ngừng hoạt động bất cứ lúc nào.Phần tử HTML ngăn văn bản mà nó chứa tự động quấn trên nhiều dòng, có khả năng dẫn đến người dùng phải cuộn theo chiều ngang để xem toàn bộ chiều rộng của văn bản.: The Non-Breaking Text element Be aware that this feature may cease to work at any time. The HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.

Làm cách nào để ngừng gói văn bản?

Bật hoặc tắt gói văn bản cho hộp văn bản, hộp văn bản phong phú hoặc hộp biểu thức.Nhấp chuột phải vào điều khiển mà bạn muốn bật hoặc tắt gói văn bản, sau đó nhấp vào các thuộc tính điều khiển trên menu phím tắt.Nhấp vào tab Hiển thị.Chọn hoặc xóa hộp kiểm Văn bản Wrap.Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.

programming css overflow-wrap White-space CSS text-overflow Wrap text CSS CSS word-break Word-wrap: break-word

Hướng dẫn how do i stop breaking text in css? - làm thế nào để tôi ngừng ngắt văn bản trong css?

Không có bọc

Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)

Làm cách nào để giữ văn bản trong một dòng trong CSS?

Làm thế nào để bạn làm cho các từ không bị vỡ?

Làm cách nào để dừng phá vỡ văn bản trong HTML?

Làm cách nào để ngừng gói văn bản?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội