Cách gói văn bản vào một dòng mới trong CSS – bọc văn bản trong css

Phần lớn văn bản phá vỡ phong cách hoặc bố cục của trang web của bạn? Đây là cách quấn văn bản bằng CSS.

Bạn đang xem : văn bản bọc trong css

Phần lớn văn bản phá vỡ phong cách hoặc bố cục của trang web của bạn? Dưới đây là cách gói văn bản bằng CSS.

Văn bản dài có thể xuất hiện không kiểm soát được trong quá trình thiết kế web. Nhưng chúng cũng có thể không thể tránh khỏi, và đôi khi chúng sẽ vượt qua biên giới. Điều này có thể tạo ra Mô hình đối tượng tài liệu (DOM) lỏng lẻo với phần tràn không cần thiết, không thân thiện với người dùng.

Nhưng đây là tin tốt: bạn có thể giải quyết những văn bản dài như vậy bằng cách gói chúng vào một dòng mới bằng cách sử dụng CSS. Sau đây, chúng tôi sẽ chỉ cho bạn cách gói các văn bản dài, không bị đứt đoạn bằng CSS.

LÀM VIDEO TRONG NGÀY

Cách hoạt động của CSS Text Wrap

CSS xử lý các từ dài được kéo dài bằng cách sử dụng thuộc tính word-wrap hoặc tràn-bọc có sẵn.

Tuy nhiên, khi không được kiểm soát, các trình duyệt sẽ xử lý các văn bản dài như vậy theo mặc định. Họ sẽ không nói dài dòng cho đến khi nhận được hướng dẫn làm như vậy.

Có liên quan: Những điều bạn cần biết về DOM

Hai thuộc tính CSS chính được đề cập trước đó hoạt động theo cùng một cách và bạn có thể sử dụng chúng thay thế cho nhau. Tuy nhiên, chúng chấp nhận bốn giá trị hoặc cú pháp:

  • ngắt từ : Đây là cú pháp CSS thực tế yêu cầu trình duyệt chuyển một văn bản dài sang một dòng mới.
  • normal : Nó ngắt từng từ tại các điểm phân tách thông thường trong DOM. Nó không có tác dụng đối với các chuỗi dài.
  • tên đầu tiên : Đây là cách xử lý chuỗi mặc định của trình duyệt. Giống như cú pháp normal , nó không ngắt các từ dài.
  • inherit : Nó yêu cầu phần tử con kế thừa thuộc tính của phần tử cha của nó. Nhưng nó vẫn không hoạt động với các văn bản dài, ngoại trừ việc bạn áp dụng ngắt từ cho phần tử mẹ.
Xem Thêm  Cách khai báo và khởi tạo một mảng trong Java - java khai báo một mảng

Cách viết các từ dài bằng CSS Word Wrap

Việc chuyển các từ sang một dòng mới bằng CSS thật dễ dàng và không yêu cầu các chỉnh sửa CSS rườm rà để hoạt động.

Ví dụ: văn bản h2 dài trong vùng chứa văn bản trong hình ảnh mẫu bên dưới vượt qua đường viền:

Trang web có vùng chứa div có văn bản dài h2

Hãy xem cách chúng ta có thể đưa nó vào dòng tiếp theo bằng cách sử dụng thuộc tính CSS word-wrap :

HTML :

  

& lt;

div class = "wrap-it"

& gt;
This-div-contains-the-long-h2-lorem-text-yet-in hình trên

& lt;

/ div "

& gt;


CSS :

 . wrap-it {
word-wrap: break-word;
}

Sau khi gói văn bản dài h2 trong hình ảnh mẫu, đây là kết quả:

Trang web có vùng chứa div có văn bản dài h2 được bao bọc trên một dòng mới

Vậy là xong! Giờ bạn đã biết cách gói các từ vào một dòng mới trong DOM của mình bằng cách sử dụng CSS.

Có liên quan: Cách nhắm mục tiêu một phần của trang web bằng bộ chọn CSS

Tuy nhiên, như đã nêu trước đó, word-wrap tràn-wrap hoạt động theo cùng một cách và chấp nhận các thuộc tính tương tự.

Để sử dụng tràn-gói thay vào đó, chỉ cần thay word-wrap bằng nó.

Điều quan trọng là phải kết hợp các từ trên một trang Web

Ngoài việc tăng thêm tính thẩm mỹ cho trang web của bạn, gói văn bản sẽ thu gọn DOM. Ngay cả khi bạn kiểm soát những gì đi vào phần nội dung của mình, người dùng vẫn có thể đăng các liên kết hoặc các từ khác không phù hợp với vùng chứa văn bản hoặc toàn bộ DOM của bạn.

Do đó, việc áp dụng dòng chữ cho một phần như vậy là cần thiết để giữ nguyên vẹn DOM.


Xem thêm những thông tin liên quan đến chủ đề bọc văn bản trong css

How to Wrap Text Around Image in CSS

alt

  • Tác giả: Internet Services and Social Networks Tutorials from HowTech
  • Ngày đăng: 2013-06-12
  • Đánh giá: 4 ⭐ ( 7205 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial you will see how to wrap text around images by applying CSS image floating.

    Don’t forget to check out our site http://howtech.tv/ for more free how-to videos!
    http://youtube.com/ithowtovids – our feed
    http://www.facebook.com/howtechtv – join us on facebook
    https://plus.google.com/103440382717658277879 – our group in Google+

    Most of the web pages contain text around images. This technique is actually called wrapping the text around the image.

    Follow this easy step by step tutorial to learn how to wrap text around images through CSS and see how the alignment classes work.

    Step 1 – Specifying the Image and Writing Text

    First of all, give the path of the image in double quotes within the image source tag. Within the same tag, specify CSS image floating class which would be used for aligning the image. First use the “Float Left” element.
    After that, open up the paragraph tag and just write any text within that.

    Then, open up the image source tag once more and repeat the same steps, but this time, use the float right class for aligning the image.

    Make sure to close the paragraph tags after the texts.

    With that done, close the body and html tags as well.

    Step 2 – Defining the Classes

    Now let’s define the CSS image floating classes, declared in previous steps.
    For that, open up the style tag before the body tag and let’s understand the working of the classes.

    The float method in the float left class is actually placing the image to the left with 4 pixels from the left corner of the screen. Similarly, the float right element inside float right class moves the image to the right side.

    With that done, close the style tag and save the HTML document.

    Step 3 – Viewing the Effect

    Now when we open up the HTML file in the browser, we will see the text around images would be wrapped according to our code.

    And that is how text is wrapped around an image.

Định dạng văn bản bằng CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 3876 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng văn bản bằng CSS sẽ cho các bạn thấy cách chúng ta định dạng nôi trung trang web. Nếu chúng ta sử dụng HTML để định dạng nội dung thì khi có

Định dạng văn bản (Text) trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 7611 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này chúng ta sẽ tìm hiểu về các cách để định dạng dạng văn bản (Text) trong CSS bởi sử dụng các thuộc tính CSS định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau

Bao bọc văn bản bên trong hình dạng CSS

  • Tác giả: vie.thercb.org
  • Đánh giá: 4 ⭐ ( 6247 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi muốn căn chỉnh / bọc văn bản của tôi bên trong một hình tam giác để theo hình dạng đường viền của nó. Tôi đã làm một ví dụ bằng cách sử dụng một hình bình hành, nhưng kết quả không thỏa mãn. .parallelogram {width: 200px; …

Định Kiểu Văn Bản trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 5116 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS cung cấp các thuộc tính giúp định kiểu cho văn bản của phần tử HTML trên trang như: color, text-alignment, text-decoration, text-transform, text-indent, line-height, line-spacing, letter-spacing…

HOW: Làm cách nào để bọc văn bản bằng CSS?

  • Tác giả: vi.androidnetc.org
  • Đánh giá: 5 ⭐ ( 6713 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: gdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

    Làm cách nào để nhận được tin nhắn …

Bao bọc văn bản bên trong phần tử input type = “text” HTML / CSS

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7314 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đó là textareacông việc của – để nhập văn bản nhiều dòng. Người input sẽ không…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình