Hướng dẫn how do i make two lines of text in html? - làm cách nào để tạo hai dòng văn bản trong html?

Question

Cái tốt nhất tôi thấy chỉ là CSS và phản hồi đến từ Mobify Developer Blog - CSS Ellipsis: Cách quản lý dấu chấm lửng đa dòng trong CSS thuần túy:

Ví dụ về JS Fiddle

CSS:

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

Html:


    
        Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can.

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ó 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 how do i make two lines of text in html? - làm cách nào để tạo hai dòng văn bản trong 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 thêm một lần phá vỡ dòng trong HTML?
TAG chèn một ngắt dòng duy nhất.Thẻ rất hữu ích cho địa chỉ viết hoặc bài thơ.Thẻ là một thẻ trống có nghĩa là nó không có thẻ cuối. inserts a single line break. The 
 tag is useful for writing addresses or poems. The 
 tag is an empty tag which means that it has no end tag.
Làm thế nào để bạn tạo ra một khoảng cách hai dòng trong HTML?
Tạo thêm không gian trước hoặc sau văn bản để tạo thêm không gian trước, sau hoặc giữa văn bản của bạn, sử dụng & nbsp;(không gian không phá vỡ) ký tự HTML mở rộng.use the   (non-breaking space) extended HTML character.

programming html Div break line Overflow-wrap Wrap text CSS

Hướng dẫn how do i make two lines of text in html? - làm cách nào để tạo hai dòng văn bản trong html?

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 thêm một lần phá vỡ dòng trong HTML?

Làm thế nào để bạn tạo ra một khoảng cách hai 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

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội