Nếu bạn đã gặp phải tình huống khi bạn cần bao bọc các từ dài trong

, hãy sử dụng thuộc tính khoảng trắng với giá trị “pre-wrap” và thuộc tính word-wrap.

Bạn đang xem : css gói văn bản trong div

Có nhiều thuộc tính CSS có thể được sử dụng để kiểm soát gói và điểm ngắt và xác định cách xử lý dấu cách và ngắt dòng trước khi gói.

Nếu bạn đã gặp phải trường hợp cần phải gói các từ trong & lt; div & gt; , bạn có thể sử dụng thuộc tính white-space với “pre- bọc “giá trị để giữ khoảng trắng bởi trình duyệt và bọc văn bản khi cần thiết và khi ngắt dòng. Ngoài ra, bạn sẽ cần thuộc tính word-wrap .

Trong đoạn mã này, hãy xem cách sử dụng các thuộc tính được đề cập ở trên để bọc các từ trong & lt; div & gt; bằng phương pháp trình duyệt chéo.

Tạo HTML

  • Sử dụng & lt; h1 & gt; và & lt; div & gt; các yếu tố.
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ

& lt; /

h1

& gt;

& lt;

div

& gt;

Lorem ipsum, hoặc lipsum như đôi khi được biết đến, là văn bản giả được sử dụng trong thiết kế in ấn, đồ họa hoặc thiết kế web. Đoạn văn được cho là của một người thợ sắp chữ không rõ ở thế kỷ 15, người được cho là đã xáo trộn các phần của cuốn sách De Finibus Bonorum et Malorum của Cicero để sử dụng trong một cuốn sách mẫu.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  Tôi có nêu ra hoặc trả về lỗi trong Python không? - nêu ra một lỗi trong python

Thêm CSS

  • Đặt thuộc tính khoảng trắng thành “pre-wrap”. Ngoài ra, hãy thêm tiền tố -moz- và -o-.
  • Sử dụng thuộc tính word-wrap với giá trị “break-word”.
  

div

{

white-space

: pre-wrap;

khoảng trắng

: -moz-pre-wrap;

khoảng trắng

: -pre-wrap;

khoảng trắng

: -o-pre-wrap;

word-wrap

: break-word; }

Kết quả mã của chúng tôi trông giống như sau.

Ví dụ về cách gói các từ trong & lt; div & gt; phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

white-space

: pre-wrap;

khoảng trắng

: -moz-pre-wrap;

khoảng trắng

: -pre-wrap;

khoảng trắng

: -o-pre-wrap;

word-wrap

: break-word;

color

: lightgreen; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ

& lt; /

h1

& gt;

& lt;

div

& gt;

Lorem ipsum, hoặc lipsum như đôi khi nó được biết đến, là văn bản giả được sử dụng để in ấn, đồ họa hoặc thiết kế web. Đoạn văn được cho là của một máy sắp chữ không xác định ở thế kỷ 15 người được cho là đã xáo trộn các phần của De Finibus Bonorum et Malorum của Cicero cho sử dụng trong một cuốn sách mẫu.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Lorem ipsum,
hoặc lipsum như đôi khi nó được biết đến, là văn bản giả được sử dụng để in ấn,
đồ họa hoặc thiết kế web. Đoạn văn được cho là của một máy sắp chữ không xác định ở thế kỷ 15
người được cho là đã xáo trộn các phần của De Finibus Bonorum et Malorum của Cicero cho
sử dụng trong một cuốn sách mẫu.

Hãy xem một ví dụ khác, trong đó chúng tôi sử dụng thuộc tính CSSflow-wrap , áp dụng cho các phần tử nội tuyến. Nó xác định xem trình duyệt có phải thêm dấu ngắt dòng trong một chuỗi không thể ngắt được hay không để ngăn văn bản tràn hộp dòng của nó.

Xem Thêm  Nối bằng Python - Cách nối vào một danh sách hoặc một mảng - python thêm giá trị vào danh sách

Trong ví dụ bên dưới, chúng tôi không chỉ gói từ trong một & lt; div & gt; mà còn là từ, được đặt trong & lt; span & gt; bên trong & lt; div & gt; yếu tố.

Ví dụ gói các từ trong & lt; div & gt; phần tử có thuộc tính CSS word-wrap:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

width

:

100px

;

border

:

1px

màu xanh lục đặc;

padding

:

10px

;

word-wrap

: break-word; }

span

{

tràn-bọc

: break-word; -webkit-

dấu gạch ngang

: auto; -ms-

dấu gạch ngang

: auto;

dấu gạch ngang

: auto; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ

& lt; /

h1

& gt;

& lt;

div

& gt;

Đây là

& lt;

span

& gt;

loooooooooooooooooooooooooong

& lt; / Ví dụ:

span

& gt;

văn bản. Đây có thể là một từ dài, quáooooooooooooo.

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


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

CSS Layouts:Generic Text Editor – Header Div

  • Tác giả: Stefan Mischook
  • Ngày đăng: 2012-04-15
  • Đánh giá: 4 ⭐ ( 8207 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: http://www.killersites.com In this video tutorial from our CSS Layouts: Generic Text Editor Course, we go over the header div.\r
    \r
    Note that all of our videos are in a higher quality when purchased from our Killer Video Store or by subscription to our Video Tutorial Library!\r
    \r
    We’ve only made part of our content available for free. For the rest, check out our Killer Video Store or our Video Tutorial Library at Killersites.com!\r
    \r
    http://www.killervideostore.com/\r
    http://www.killersites.com/university/\r
    http://www.killersites.com/community/\r
    http://www.csstutorial.net/
Xem Thêm  Cách tạo trang web thân thiện với thiết bị di động: Thiết kế đáp ứng trong CSS (thesitewizard.com) - mã css cho điện thoại di động đáp ứng

Bảng trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 7342 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.

Hướng dẫn sử dụng Div bằng HTML với CSS

  • Tác giả: hoanguyenit.com
  • Đánh giá: 3 ⭐ ( 7924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng Div bằng HTML với CSS

Vai trò của giá trị bao bọc thuộc tính flex-wrap CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 6251 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sociss Class – Online Education Center

  • Tác giả: sociss.edu.vn
  • Đánh giá: 4 ⭐ ( 1785 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về Block và Inline trong CSS. Đây là hai kiểu hiển thị thường dùng nhất trong việc thiết kế website

CSS bao bọc văn bản xung quanh hình ảnh trong vùng chứa div không nổi

  • Tác giả: vi.etsoutdoors.com
  • Đánh giá: 5 ⭐ ( 6205 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là kịch bản của tôi. #main_content div chứa div #nav_leftsidebar (nổi bên trái) cho các liên kết điều hướng, #bottom_leftsidebar div (nổi bên trái) được xếp chồng bên dưới #nav_leftsidebar (bằng cách xóa float l …

Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải

  • Tác giả: kiemlua24h.co
  • Đánh giá: 4 ⭐ ( 4626 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi sử dụng CSS text-align thuộc tính để căn chỉnh nội dung bên trong phần tử cấp khối.Ví dụ về các phần tử cấp khối là các đoạn văn…

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

By ads_php