Hướng dẫn auto break line css - tự động ngắt dòng css

12

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đã thực hiện một hộp bình luận và tôi gặp vấn đề sau khi xem bình luận của mình. Tất cả những gì tôi muốn là làm cho dòng tự động phá vỡ của tôi khi nó vượt quá container nhưng những gì tôi có ngay bây giờ là một đường thẳng.

Ví dụ:

tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Tôi hy vọng văn bản của tôi có thể như thế này:

ttttttttttttt
ttttttttttttt 
ttttttttttttt 
ttttttttttttt 

Tôi nên sử dụng những gì để tạo dòng Break Auto Break của mình?

Lucio

4.3033 Huy hiệu vàng44 Huy hiệu bạc72 Huy hiệu Đồng3 gold badges44 silver badges72 bronze badges

Khi được hỏi ngày 2 tháng 5 năm 2011 lúc 1:21May 2, 2011 at 1:21

Có vẻ như bạn đang theo đuổi

$line_broken = str_replace("\n", "
", $comment);

Xem: https://developer.mozilla.org/en/css/white-pace

selector {
      word-wrap: break-word;      /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}

Bản demo: http://jsfiddle.net/mcj6s/

Đã trả lời ngày 2 tháng 5 năm 2011 lúc 1:27May 2, 2011 at 1:27

Ba COTYDOTTHIRTYDOTthirtydot

220K48 Huy hiệu vàng388 Huy hiệu bạc348 Huy hiệu đồng48 gold badges388 silver badges348 bronze badges

1

Thử sử dụng thay thế chuỗi:

$line_broken = str_replace("\n", "
", $comment);

Nhưng thật khó để nói mà không nhìn thấy mã của bạn.

Đã trả lời ngày 2 tháng 5 năm 2011 lúc 1:23May 2, 2011 at 1:23

Nick Heiverernick HeinerNick Heiner

116K183 Huy hiệu vàng469 Huy hiệu bạc696 Huy hiệu Đồng183 gold badges469 silver badges696 bronze badges

2

Không chắc chắn làm thế nào để tự động phá vỡ dòng của bạn mà không cần một đoạn PHP. Bạn có thể xem xét sử dụng CSS

$line_broken = str_replace("\n", "
", $comment);

$line_broken = str_replace("\n", "
", $comment);

Đã trả lời ngày 2 tháng 5 năm 2011 lúc 1:25May 2, 2011 at 1:25

1

Sử dụng

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

Đã trả lời ngày 23 tháng 7 lúc 19:52Jul 23 at 19:52

JasonjasonJason

701 Huy hiệu bạc11 Huy hiệu đồng1 silver badge11 bronze badges

1

Một giải pháp sử dụng HTML: TAG

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

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

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

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

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

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

Đã trả lời ngày 23 tháng 7 lúc 20:12Jul 23 at 20:12

Một không gian trắng có thể là một chuỗi các không gian (được nhập bằng cách sử dụng không gian hoặc các phím tab) hoặc ngắt dòng (được nhập bằng phím trả về vận chuyển (hoặc phím Enter) hoặc).Thuộc tính này sẽ chỉ định cách các không gian trắng trong mã nguồn của một phần tử sẽ được xử lý bên trong phần tử khi được hiển thị trên trang.. This property will specify how the white spaces in the source code of an element will be handled inside the element when rendered on the page.

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

• Để thực hiện ngắt dòng trong HTML, sử dụng thẻ.Chỉ cần đặt thẻ bất cứ nơi nào bạn muốn buộc phải phá vỡ dòng.Vì ngắt dòng HTML là một yếu tố trống, không có thẻ đóng.Dưới đây là một tệp HTML với một và phần tử.use the tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a
• and element.
• Android chrome
• Trình duyệt Android
• Làm cách nào để buộc một dòng mới trong CSS?
• Đặ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ó. ....

Sử dụng ký tự trả về vận chuyển (\ A) làm nội dung trong phần tử giả:.

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

split this
split this 

Là dòng phá vỡ một khoảng trắng?break lines on each white space?

web-tiki

Một không gian trắng có thể là một chuỗi các không gian (được nhập bằng cách sử dụng không gian hoặc các phím tab) hoặc ngắt dòng (được nhập bằng phím trả về vận chuyển (hoặc phím Enter) hoặc).Thuộc tính này sẽ chỉ định cách các không gian trắng trong mã nguồn của một phần tử sẽ được xử lý bên trong phần tử khi được hiển thị trên trang.. This property will specify how the white spaces in the source code of an element will be handled inside the element when rendered on the page.31 gold badges211 silver badges244 bronze badges

Làm thế nào để bạn phá vỡ một dòng bên trong?Oct 23, 2015 at 10:23

2

Để thực hiện ngắt dòng trong HTML, sử dụng thẻ.Chỉ cần đặt thẻ bất cứ nơi nào bạn muốn buộc phải phá vỡ dòng.Vì ngắt dòng HTML là một yếu tố trống, không có thẻ đóng.Dưới đây là một tệp HTML với một và phần tử.use the tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a break lines on each white space between words :

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

split this

and element.Oct 23, 2015 at 10:27

web-tikiweb-tikiweb-tikiweb-tiki

Một không gian trắng có thể là một chuỗi các không gian (được nhập bằng cách sử dụng không gian hoặc các phím tab) hoặc ngắt dòng (được nhập bằng phím trả về vận chuyển (hoặc phím Enter) hoặc).Thuộc tính này sẽ chỉ định cách các không gian trắng trong mã nguồn của một phần tử sẽ được xử lý bên trong phần tử khi được hiển thị trên trang.. This property will specify how the white spaces in the source code of an element will be handled inside the element when rendered on the page.31 gold badges211 silver badges244 bronze badges

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

Để thực hiện ngắt dòng trong HTML, sử dụng thẻ.Chỉ cần đặt thẻ bất cứ nơi nào bạn muốn buộc phải phá vỡ dòng.Vì ngắt dòng HTML là một yếu tố trống, không có thẻ đóng.Dưới đây là một tệp HTML với một và phần tử.use the tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a

h2 {
   word-wrap: break-word;
}

and element.

h2 {
   word-break: break-all;
}

and element.Oct 23, 2015 at 10:27

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?

Không có bọc17 silver badges33 bronze badges

2

• Cách ngăn chặn việc phá vỡ dòng bằng CSS (DigitalOcean)
• Trong ví dụ sau, kết quả sẽ trông giống như tiêu đề thứ hai:
• Có thể phá vỡ các đường trên mỗi không gian trắng?break lines on each white space?

split this
split this 

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 :

ttttttttttttt
ttttttttttttt 
ttttttttttttt 
ttttttttttttt 

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?

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

Để 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:..

.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

• 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

split this

Opera

Tất cả các. Sequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.

Android chrome

Android Firefox.

Trình duyệt Android

Source: caniuse

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

Các dòng chỉ bị hỏng tại các ký tự mới trong nguồn và tại các phần tử. Trình tự của không gian trắng được bảo tồn. Các dòng bị hỏng tại các ký tự mới, tại và khi cần thiết để điền vào các hộp dòng.. Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.. This property will specify how the white spaces in the source code of an element will be handled inside the element when rendered on the page.

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

Để 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:..use the
tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a

Đặ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ó. ....
element.