Hướng dẫn css break line in space - css ngắt dòng trong không gian

Có thể phá vỡ dòng trên không gian trắng và đặt từ tiếp theo trên một dòng mới không?

Trong ví dụ sau, kết quả sẽ trông giống như tiêu đề thứ hai:

.test{
  text-align:center;
}
h2{  
  display:inline-block;
}
span{
   position:relative;
   top:50px;
   right:45px;
}

split this
split this 

Có thể phá vỡ các đường trên mỗi không gian trắng?break lines on each white space?

web-tiki

94.5K31 Huy hiệu vàng211 Huy hiệu bạc244 Huy hiệu đồng31 gold badges211 silver badges244 bronze badges

Đã hỏi ngày 23 tháng 10 năm 2015 lúc 10:23Oct 23, 2015 at 10:23

2

Bạn có thể sử dụng một giá trị rất cao cho thuộc tính khoảng cách từ. Nó sẽ phá vỡ các đường trên mỗi khoảng trắng giữa các từ:break lines on each white space between words :

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

split this

Đã trả lời ngày 23 tháng 10 năm 2015 lúc 10:27Oct 23, 2015 at 10:27

web-tikiweb-tikiweb-tiki

94.5K31 Huy hiệu vàng211 Huy hiệu bạc244 Huy hiệu đồng31 gold badges211 silver badges244 bronze badges

Đã hỏi ngày 23 tháng 10 năm 2015 lúc 10:23

Bạn có thể sử dụng một giá trị rất cao cho thuộc tính khoảng cách từ. Nó sẽ phá vỡ các đường trên mỗi khoảng trắng giữa các từ:

h2 {
   word-wrap: break-word;
}

Đã trả lời ngày 23 tháng 10 năm 2015 lúc 10:27

h2 {
   word-break: break-all;
}

Đã trả lời ngày 23 tháng 10 năm 2015 lúc 10:27Oct 23, 2015 at 10:27

Bạn có thể sử dụng

split this
split this 

Như sau:17 silver badges33 bronze badges

2

• Nếu bạn thay vào đó sẽ phá vỡ từ này, bất kể điểm phá vỡ (khiến từ bị phá vỡ từ điểm mà nó không phù hợp với khu vực nữa) bạn có thể sử dụng

  
  split this
  split this 
  

  1.
• ProdexoriteProdeXorite
• 1.55217 Huy hiệu bạc33 Huy hiệu đồng

.test{
  text-align:center;
  width: min-content;
  white-space: break-space;
  margin-left: auto;
  margin-right: auto;
}

split this

split this
split this 

split this
split this 

split this
split this 

split this
split this 

Để buộc các yếu tố nội tuyến vào một dòng mới, tuy nhiên, bạn có thể thực hiện bất kỳ điều gì sau đây:.

  A bunch of words you see.

Đặt Hiển thị: Khối; Về yếu tố: Đây có thể là một trong những rõ ràng nhất; Một phần tử cấp khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn cho nó. ....

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

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

If you want to prevent the text from wrapping, you can apply

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

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 ta 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 ta có thể sử dụng

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

Nó được gọi là

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

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

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

Cuối cùng,

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

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:

split this
split this 

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

.test{
  text-align:center;
}
h2{
  word-spacing:9999px;
}

split this

split this

Bảo tồn

Không có bọc

• Trong CSS3, thuộc tính

  
  split this
  split this 
  

  6 theo nghĩa đen sẽ theo biểu đồ đó và ánh xạ các thuộc tính thành

  
  split this
  

  3 và

  
  split this
  

  4 theo đó.
• Thêm thông tin
• Tài sản CSS

  
  split this
  

  5 (DigitalOcean)

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

Làm thế nào để bạn phá vỡ một dòng trong không gian trong CSS?

Làm cách nào để buộc một dòng mới trong CSS?

Là dòng phá vỡ một khoảng trắng?

Làm thế nào để bạn phá vỡ một dòng bên trong?