Text-align-last - Thủ thuật CSS

Anonim

text-align-lastcho phép bạn kiểm soát sự căn chỉnh của dòng văn bản cuối cùng (hoặc duy nhất) ngay trước khi bắt buộc ngắt dòng - ví dụ: cuối đoạn văn hoặc dòng ngay trước
thẻ.

.intro-graph ( text-align-last: center; )

Tại thời điểm viết bài này, chỉ hỗ trợ trình duyệt Mozilla và Internet Explorer text-align-last(với tiền tố của nhà cung cấp) và mỗi trình duyệt có cách triển khai hơi khác nhau. Thuộc tính được cho là sẽ bắt đầu hoạt động trong Chrome 35, nhưng kể từ Chrome 40, thuộc tính vẫn yêu cầu cờ nền tảng web thử nghiệm. Thông tin chi tiết hơn về triển khai trình duyệt trong Địa điểm yêu thích

Giá trị

  • left căn chỉnh dòng văn bản cuối cùng ở bên trái của vùng chứa.
  • rightcăn chỉnh dòng văn bản cuối cùng ở bên phải của vùng chứa.
  • center căn giữa dòng văn bản cuối cùng trong vùng chứa.
  • justify căn chỉnh dòng văn bản cuối cùng để nó kéo dài toàn bộ chiều rộng của vùng chứa, chèn khoảng trắng giữa các từ nếu cần để tăng độ dài dòng.
  • startcăn chỉnh văn bản với "đầu" của dòng dựa trên directionvăn bản - bên trái cho các ngôn ngữ LTR, bên phải cho các ngôn ngữ RTL.
  • endcăn chỉnh dòng cuối cùng với "cuối" của dòng dựa trên directionvăn bản - bên phải cho các ngôn ngữ LTR, bên trái cho các ngôn ngữ RTL.
  • automặc định. Căn chỉnh dòng cuối cùng của văn bản để phù hợp với thuộc tính của phần tử text-align, nếu nó được đặt. Nếu nó không được đặt, hãy autocăn chỉnh văn bản cho đến đầu.
  • inheritáp dụng thuộc text-align-lasttính của phần tử mẹ.

Bản giới thiệu

Bản trình diễn này cho thấy các text-align-lastgiá trị khác nhau đang hoạt động. Lưu ý: Internet Explorer không hỗ trợ giá trị starthoặc end.

Xem Pen text-align-last by CSS-Tricks (@ css-trick) trên CodePen.

Điểm quan tâm

Trong Internet Explorer, text-align-lastchỉ hoạt động khi text-alignphần còn lại của văn bản trong phần tử đã chọn được đặt thành justify. Ngoài ra, IE không nhận dạng được starthoặc endgiá trị.

Trong trình duyệt Mozilla, text-align-lastsẽ hoạt động trên dòng cuối cùng trước khi bắt buộc ngắt dòng ngay cả khi không có căn chỉnh được chỉ định cho phần còn lại của văn bản trong phần tử.

Cũng cần biết rằng hãy text-align-lastđặt căn chỉnh cho tất cả các dòng cuối cùng trong phần tử đã chọn, không chỉ dòng cuối cùng của văn bản. Vì vậy, ví dụ, nếu bạn có một divvới năm đoạn văn trong đó, text-align-lastkhai báo của bạn sẽ áp dụng cho dòng cuối cùng của mỗi đoạn văn.

Nếu bạn chỉ muốn sử dụng text-align-lasttrên dòng cuối cùng trong vùng chứa, bạn có thể sử dụng :last-childhoặc :last-of-type. CSS của bạn sẽ trông giống như sau:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Trong bản trình diễn bên dưới, bên trái hiển thị text-align-last: center;áp dụng cho một div có nhiều đoạn bên trong nó. Chú ý rằng dòng cuối cùng của mỗi đoạn được căn giữa. Bên phải hiển thị text-align-last: center;chỉ áp dụng cho đoạn cuối cùng bên trong div bằng cách sử dụng :last-child.

Xem Pen text-align-last by CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • căn chỉnh văn bản
  • thụt lề văn bản

Thêm thông tin

  • text-align-last trong Mô-đun văn bản CSS cấp 3 (W3C)
  • text-align-last at MDN
  • text-align-last tại MSDN
  • text-align-last trên blog nhóm nền tảng web của Adobe
  • Webkit Bug 76173, liên quan đến việc Chrome triển khai text-align-last

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
35+ với cờ thử nghiệm Không 34+ (tiền tố) Không 5.5+ (tiền tố) Không Không