Hướng dẫn add line between text html - thêm dòng giữa văn bản html

Question

Tôi đã tìm kiếm một số giải pháp cho trang trí đơn giản này và tôi đã tìm thấy khá nhiều loại, một số điều kỳ lạ, một số thậm chí với JS để tính toán chiều cao của phông chữ và bla, bla, bla, sau đó tôi đã đọc Một trong bài đăng này và đọc một bình luận từ baydot nói về fieldset và legend và tôi nghĩ đó là nó.thirtydot speaking about fieldset and legend and I thought that was it.

Tôi đang ghi đè lên 2 kiểu yếu tố đó, tôi đoán bạn có thể sao chép các tiêu chuẩn W3C cho chúng và đưa nó vào lớp .middle-line-text của bạn (hoặc bất cứ điều gì bạn muốn gọi nó) nhưng đây là những gì tôi đã làm:


    Your text goes here

Đây là fiddle: http://jsfiddle.net/legnaleama/3t7wjpa2/

Tôi đã chơi với các kiểu biên giới và nó cũng hoạt động trong Android;) (được thử nghiệm trên KitKat 4.xx)

EDIT:

Theo ý tưởng của Bekerov Artur cũng là một tùy chọn hay, tôi đã thay đổi hình ảnh .png Base64 để tạo đột quỵ bằng .SVG để bạn có thể hiển thị trong bất kỳ độ phân giải nào và cũng thay đổi màu của phần tử mà không cần bất kỳ phần mềm nào khác liên quan :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

https://vimeo.com/270702335

Với các lớp và ID, chúng tôi đã thấy rằng có thể tùy chỉnh sự xuất hiện của các yếu tố nhất định.

Có thể bạn quan tâm

Có nhiều cách dễ dàng để phá vỡ cấu trúc của trang của bạn để phân tách các chủ đề hoặc ý tưởng mà không cần tạo các lớp hoặc ID.

Bạn có thể sử dụng ngắt dòng hoặc các quy tắc ngang (nghĩa là các dòng) để làm như vậy!

Giả sử bạn muốn viết mã một bài viết về Coffeeshops tốt nhất của New York và bạn muốn nó được cấu trúc như sau:

Hướng dẫn add line between text html - thêm dòng giữa văn bản html

Bài viết trên web về các quán cà phê của New York

Chú ý đến hai điều:

Các địa chỉ dưới mỗi tên Coffeeshop
Dòng phân tách danh sách Manhattan với Danh sách Brooklyn

Đây là những gì chúng tôi sẽ đề cập trong chương này.

Dòng phá vỡ

Các đoạn là các phần tử cấp khối, có nghĩa là chúng chiếm chiều rộng của phần tử chứa của chúng theo mặc định. Họ cũng có khoảng cách trên và bên dưới họ. Nó không chỉ là một sự phá vỡ dòng đơn giản.

Xem khoảng trống giữa "dòng 1" và "dòng 2" trong hình ảnh sau? Không gian đó được thêm tự động vào phần tử HTML (bởi CSS):

Không gian dòng mặc định xuất hiện giữa các đoạn văn

Đôi khi, bạn không muốn không gian thêm đó. Bạn sẽ muốn ít khoảng trống hơn giữa mỗi dòng:

Ít không gian giữa hai dòng khác nhau

Điều này đúng đặc biệt cho địa chỉ và bài thơ. Bạn không cần một đoạn hoàn toàn mới cho mỗi dòng trong một địa chỉ! Một đơn giản, và hẹp hơn, phá vỡ dòng sẽ làm.

Để tạo đường ngắt trong HTML, hãy sử dụng thẻ. Không có thẻ đóng cần thiết.

Toby's Estate

    125 N 6th St
    

    Brooklyn, NY 11249

Trong mã ở trên, sẽ có một dòng phá vỡ giữa "125 N 6 St" và "Brooklyn, NY 11249" sẽ không có lượng không gian kỳ quặc xuất hiện giữa hai phần tử đoạn. Nó sẽ chỉ là một sự phá vỡ tốt đẹp!

Địa chỉ có các đường chia cho các dòng riêng biệt

Đây là những gì địa chỉ sẽ trông giống như hai yếu tố riêng biệt thay vì một đoạn chứa một đường ngắt:

Địa chỉ với các dòng dưới dạng các đoạn văn riêng biệt: Ngoại hình kỳ lạ

Đó là một lượng không gian kỳ lạ, phải không? & NBSP; Nó cũng không có ý nghĩa về mặt ngữ nghĩa vì một địa chỉ là một đơn vị, vì vậy để tách nó ra vì nhiều đoạn không phù hợp.

Quy tắc ngang

Bạn có thể có các chủ đề nội dung khác nhau trong một trang có liên quan nhưng có giá trị tách biệt cho rõ ràng. Trong ví dụ trên, Coffeeshops ở Manhattan được tách ra khỏi các quán cà phê ở Brooklyn vì nó giúp nhóm nội dung khác nhau trong bài viết.

Để tạo một dòng hoặc "quy tắc ngang" trong HTML, chỉ cần sử dụng thẻ.

Quy tắc

Manhattan
...

...
Brooklyn

Horizontal

Horizontal rule

Đây là mã HTML đầy đủ cho bài viết của Coffeeshop (tìm đó và thẻ!):


    New York's best coffeeshops
    New York has some great coffeeshops. Make sure not to miss the hot new addresses opening up left and right!
    Manhattan

    The Bean
    
        824 Broadway

        New York, NY 10003
    
    There are multiple Bean locations in the city. It's a good place to get work done because they're open late.

    Third Rail
    
        240 Sullivan St

        New York, NY 10012
    
    Coffee and donuts! What more could you want?
    
    Black Fox Coffee Co.
    
        70 Pine St

        New York, NY 10270
    
    Black Fox has an incredible bean selection and nice snacks.

    Stumptown
    
        18 W 29th St

        New York, NY 10001
    
    Does this even need explaining?
    
    

    Brooklyn
    Toby's Estate
    
        125 N 6th St

        Brooklyn, NY 11249
    
    Toby's has grown a lot from its initial location in Brooklyn. They now have three locations in NYC.

Practice!

Đi đến bài tập Codepen này.Bạn sẽ thêm một phần mới cho khu phố Nữ hoàng bằng cách sử dụng quy tắc ngang.Bạn sẽ thêm một Coffeeshop ở Queens (thực hoặc tưởng tượng), đảm bảo tạo địa chỉ của nó bằng cách sử dụng một đường ngắt.

Thêm một quy tắc ngang () trong phần Brooklyn.
Tạo tiêu đề () cho các nữ hoàng bên dưới quy tắc ngang.
Tạo một coffeeshop giả (tên và địa chỉ) và thêm nó vào phần khu phố mới của Queens.Vui lòng bắt chước chính xác mã cho các Coffeeshops trước đó để các kiểu CSS tương tự sẽ được áp dụng.

 
Làm thế nào để bạn đặt một ranh giới giữa văn bản trong HTML?
Trong ví dụ trên, Coffeeshops ở Manhattan được tách ra khỏi các quán cà phê ở Brooklyn vì nó giúp nhóm nội dung khác nhau trong bài viết.Để tạo một dòng hoặc "quy tắc ngang" trong HTML, chỉ cần sử dụng thẻ.use an 
 tag.
Làm thế nào để bạn thêm một bộ chia dòng trong HTML?
Thẻ HTML được sử dụng để tạo một đường ngang với mục đích phân chia các phần của trang.
 tag is used to create a horizontal line with the purpose of dividing sections of a page.

programming html Hr HTML Hr html mdn Create line CSS Line CSS N html Vertical line

Hướng dẫn add line between text html - thêm dòng giữa văn bản html

Có thể bạn quan tâm

Dòng phá vỡ

Toby's Estate

Quy tắc ngang

Manhattan

Brooklyn

New York's best coffeeshops

Manhattan

The Bean

Third Rail

Black Fox Coffee Co.

Stumptown

Brooklyn

Toby's Estate

Practice!

Làm thế nào để bạn đặt một ranh giới giữa văn bản trong HTML?

Làm thế nào để bạn thêm một bộ chia dòng trong HTML?

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

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội