LƯU Ý! align-items: flex-start có thể khiến overflow-wrap: break-word không hoạt động

HowieHz
2024-06-13
Khám Phá Công Nghệ > Kỹ Thuật Frontend > Thiết Kế Giao Diện

🌍 Tiếng Việt

Như hình dưới đây, trong quá trình sửa lỗi cho chủ đề halo-theme-higan (liên quan đến Issue), tôi đã gặp một vấn đề thú vị. Sự khác biệt giữa hai bức ảnh nằm ở dòng mã số 14.

Trước khi chỉnh sửa
Sau khi chỉnh sửa

Dưới đây là đoạn mã minh họa:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Trang Web Đầu Tiên</title>
  <style>
   p {
    width: 13em;
    margin: 2px;
    background: gold;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Dòng này gây ra vấn đề */
   }
   .ow-break-word {
    overflow-wrap: break-word;
   }
  </style>
 </head>
 <body>
  <p>
   Họ nói rằng câu cá rất tuyệt vời tại Hồ 
   <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, mặc dù tôi chưa bao giờ đến đó. (<code>overflow-wrap: break-word</code>)
  </p>
 </body>
</html>

Nếu bạn gặp bất kỳ thắc mắc nào, xin vui lòng để lại bình luận để cùng thảo luận. Những góp ý của bạn sẽ giúp tôi tiếp tục cải thiện và tiến bộ hơn nữa 🚀️

2024-05-09 - CSS Preprocessor: Cách tái sử dụng kiểu dáng hiệu quả (và những cái bẫy khi dùng @extend trong Stylus)
2024-03-21 - Tự động chuyển trang web sang màu xám vào Ngày Quốc Tế Nhớ Niềm Đau Thương
Bài Trước - Phân tích về Bảo Toàn Điện Tích: Tại sao một ion mang nhiều điện tích cần nhân chứ không chia số điện tích?
Bài Sau - Giảm Giá Sốc! Chỉ 98 Nhân Dân Tệ cho Áo Thun Hạn Chế! Halo Developer Khởi Động Chương Trình Điểm Thưởng

Thông Tin补充:

Trang Chủ
Lưu Trữ
Ghi Chép Linh Tinh
Liên Kết Hữu Ích
Giới Thiệu Về Tôi
Tìm Kiếm

Chi Tiết Bản Quyền & Liên Kết Hữu Ích:

Số Đăng Ký ICP: 2024054655-1
Mã Số Bảo Lưu Vui Vẻ: 20242466
Mã Số MIIT: 20242024

Các Liên Kết Blog:

BlogWe | Bồ Yêu Blog
Blog Journal | Blog Community
Jiu Chan | Blog Record
Open Links | Blog Finder
OurBlogs | Tập Hợp Blog
Strange Dimension Travel | Cửa Hàng Cá Nhân
Blog Talk | Blogs Club
Pen Ink | Ten-Year Promise
Danh Sách Blog Tiếng Trung Độc Lập

Thời Gian Hoạt Động Của Website: 1 Năm 131 Ngày 21 Giờ 01 Phút 08 Giây
Website được hỗ trợ bởi Đa Kỳ Vân, YouPai Yun và WAF.SB.

Thống Kê:

Số Lượt Xem: 33,200
Tổng Số Bài Đăng: 90

Trang Chủ
Lưu Trữ
Ghi Chép Linh Tinh
Liên Kết Hữu Ích
Giới Thiệu Về Tôi

Hy vọng bài viết này hữu ích cho bạn đọc!

Bài Viết Đề Xuất:

Game Bài Nohu36

LƯU Ý! align-items: flex-start có thể khiến overflow-wrap: break-word không hoạt động

Thông Tin补充:

Chi Tiết Bản Quyền & Liên Kết Hữu Ích:

Thống Kê: