Hướng dẫn Justify Text trong CSS. Ở đây chúng ta thảo luận về phần giới thiệu, text-justify hoạt động như thế nào trong CSS? và các ví dụ tương ứng.

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

Căn đều văn bản trong CSS

Giới thiệu về Justify Text trong CSS

Bài viết sau cung cấp sơ lược về Justify Text trong CSS. Thuộc tính text-justify chỉ định phần điều chỉnh của văn bản khi thuộc tính text-align được đặt thành giá trị “justify”. Thuộc tính text-justify luôn được áp dụng với thuộc tính text-align. Thuộc tính text-justify này trải các từ thành dòng hoàn chỉnh với khoảng cách bằng nhau. Thuộc tính text-justify này chỉ áp dụng với text. Thuộc tính này chứa 4 giá trị quan trọng là auto, inter-word, inter-character và không.

Tình huống thời gian thực: Trong khi chúng tôi đang hiển thị văn bản đoạn văn trên trang web, nó không được căn chỉnh chính xác. Nếu chúng ta sử dụng thuộc tính text-justify cùng với thuộc tính text-align để căn chỉnh văn bản theo một định dạng thích hợp. Căn chỉnh văn bản với các khoảng trắng bằng nhau.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Text-justify hoạt động như thế nào trong CSS?

Thuộc tính text-justify đang hoạt động dựa trên giá trị được cung cấp cho thuộc tính. Thuộc tính này chứa 4 giá trị cốt lõi.

1. Tự động

Đây là giá trị tự động tự động cho phép trình duyệt áp dụng kiểu văn bản nào phù hợp.

Cú pháp:

Bộ chọn
{
Căn chỉnh văn bản: auto;
}

2. Liên từ

Điều này hợp lý bằng cách giảm hoặc tăng khoảng cách giữa các từ riêng lẻ trong văn bản.

Cú pháp:

Bộ chọn
{
Text-justify: inter-word;
}

3. Ký tự liên

Điều này hợp lý bằng cách giảm hoặc tăng khoảng cách giữa các ký tự riêng lẻ trong văn bản.

Cú pháp:

Bộ chọn
{
Text-justify: inter-character;
}

4. Không có

Không có giá trị nào này làm cho văn bản không thể sửa đổi được vì nó không có bất kỳ giá trị nào căn chỉnh văn bản.

Cú pháp:

Bộ chọn
{
Text-justify: none;
}

Ví dụ

Dưới đây là các ví dụ được đề cập:

Ví dụ # 1

Text-justify: auto Ví dụ.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Text-justify Thuộc tính & lt; / title & gt;
& lt; phong cách & gt;
.textMain {
padding-bottom: 10px;
viền: 4px chấm đỏ;
}
.textPara {
text-align: justify;
text-justify: auto;
màu: xanh lá cây;
font-size: 20px;
}
h2 {
text-align: center;
màu: xanh lam;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "textMain" & gt;
& lt; h2 & gt; Giới thiệu về text-justify: bản trình diễn tự động & lt; / h2 & gt;
& lt; div class = "textPara" & gt; Thuộc tính text-justify chỉ định phần điều chỉnh của văn bản khi thuộc tính text-align đang đặt thành giá trị "justify". Thuộc tính text-justify luôn được áp dụng với thuộc tính text-align. Thuộc tính text-justify này trải các từ thành dòng hoàn chỉnh với khoảng cách bằng nhau. Thuộc tính text-justify này chỉ áp dụng với text. Thuộc tính này chứa 4 giá trị quan trọng là tự động, liên từ, liên ký tự và không có.
Tình huống thời gian thực: Trong khi chúng tôi đang hiển thị văn bản đoạn văn trong trang web, nó không được căn chỉnh chính xác. Nếu chúng tôi sử dụng thuộc tính text-justify cùng với thuộc tính text-align để căn chỉnh văn bản theo định dạng phù hợp.
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

See also  Các hàm và ví dụ về phương thức jQuery change () - jquery về thay đổi biểu mẫu

Căn đều văn bản trong CSS 1

Ví dụ # 2

Text-justify: Ví dụ liên từ.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Text-justify Thuộc tính & lt; / title & gt;
& lt; phong cách & gt;
.textMain {
padding-bottom: 10px;
đường viền: 5px màu xám ridge;
}
.textPara {
text-align: justify;
text-justify: inter-word;
màu: xanh lam;
font-size: 22px;
}
h2 {
text-align: center;
màu: đỏ;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "textMain" & gt;
& lt; h2 & gt; Giới thiệu về text-justify: bản trình diễn liên từ & lt; / h2 & gt;
& lt; div class = "textPara" & gt; Thuộc tính text-justify chỉ định phần điều chỉnh của văn bản khi thuộc tính text-align đang đặt thành giá trị "justify". Thuộc tính text-justify luôn được áp dụng với thuộc tính text-align. Thuộc tính text-justify này trải các từ thành dòng hoàn chỉnh với khoảng cách bằng nhau. Thuộc tính text-justify này chỉ áp dụng với text. Thuộc tính này chứa 4 giá trị quan trọng là tự động, liên từ, liên ký tự và không có.
Tình huống thời gian thực: Trong khi chúng tôi đang hiển thị văn bản đoạn văn trong trang web, nó không được căn chỉnh chính xác. Nếu chúng tôi sử dụng thuộc tính text-justify cùng với thuộc tính text-align để căn chỉnh văn bản theo định dạng phù hợp.
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Căn đều Văn bản trong CSS 2

Ví dụ # 3

Ví dụ về text-justify: liên ký tự.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Text-justify Thuộc tính & lt; / title & gt;
& lt; phong cách & gt;
.textMain {
padding-bottom: 10px;
border: 5px gạch ngang màu đỏ;
}
.textPara {
text-align: justify;
text-justify: inter-character;
màu: fuchsia;
font-size: 21px;
}
h2 {
text-align: center;
màu: xanh nước biển;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "textMain" & gt;
& lt; h2 & gt; Giới thiệu về text-justify: bản trình diễn liên ký tự & lt; / h2 & gt;
& lt; div class = "textPara" & gt; Thuộc tính text-justify chỉ định phần điều chỉnh của văn bản khi thuộc tính text-align đang đặt thành giá trị "justify". Thuộc tính text-justify luôn được áp dụng với thuộc tính text-align. Thuộc tính text-justify này trải các từ thành dòng hoàn chỉnh với khoảng cách bằng nhau. Thuộc tính text-justify này chỉ áp dụng với text. Thuộc tính này chứa 4 giá trị quan trọng là tự động, liên từ, liên ký tự và không có.
Tình huống thời gian thực: Trong khi chúng tôi đang hiển thị văn bản đoạn văn trong trang web, nó không được căn chỉnh chính xác. Nếu chúng tôi sử dụng thuộc tính text-justify cùng với thuộc tính text-align để căn chỉnh văn bản theo định dạng phù hợp.
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

See also  Bản dịch tiếng Đức - Linguee - chúng tôi đã nhận được khoản thanh toán

inter character

Ví dụ # 4

Text-justify: none Ví dụ.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Text-justify Thuộc tính & lt; / title & gt;
& lt; phong cách & gt;
.textMain {
padding-bottom: 10px;
viền: màu nâu đặc 5px;
}
.textPara {
text-align: justify;
text-justify: không có;
màu: đen;
font-size: 21px;
}
h2 {
text-align: center;
màu: cam;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "textMain" & gt;
& lt; h2 & gt; Giới thiệu về text-justify: không có bản trình diễn nào & lt; / h2 & gt;
& lt; div class = "textPara" & gt; Thuộc tính text-justify chỉ định phần điều chỉnh của văn bản khi thuộc tính text-align đang đặt thành giá trị "justify". Thuộc tính text-justify luôn được áp dụng với thuộc tính text-align. Thuộc tính text-justify này trải các từ thành dòng hoàn chỉnh với khoảng cách bằng nhau. Thuộc tính text-justify này chỉ áp dụng với text. Thuộc tính này chứa 4 giá trị quan trọng là tự động, liên từ, liên ký tự và không có.
Tình huống thời gian thực: Trong khi chúng tôi đang hiển thị văn bản đoạn văn trong trang web, nó không được căn chỉnh chính xác. Nếu chúng tôi sử dụng thuộc tính text-justify cùng với thuộc tính text-align để căn chỉnh văn bản theo định dạng phù hợp.
& lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

none Ví dụ

Kết luận

Text-justify được sử dụng để căn chỉnh với các khoảng cách và chiều rộng bằng nhau. Thuộc tính này cho phép 4 giá trị như tự động, liên từ, liên ký tự và không có. Thuộc tính text-justify này luôn cho phép thuộc tính text-align.

Các bài báo được đề xuất

Đây là hướng dẫn về Căn đều Văn bản trong CSS. Ở đây chúng ta thảo luận về phần giới thiệu, text-justify hoạt động như thế nào trong CSS? và các ví dụ tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

See also  Đúng và Sai trong PHP - php đúng hay sai

0

Chia sẻ

Chia sẻ


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

Học Lập Trình CSS Bài 12 – Margin Căn Lề

alt

  • Tác giả: Hoàng Thương Official
  • Ngày đăng: 2021-05-30
  • Đánh giá: 4 ⭐ ( 8372 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn. Mình là Thương

    Mình lập kênh này để hổ trợ mọi người về việc học..
    Để làm được những video miễn phí và bổ ích nhất.
    Mình sẽ cố gắng hết sức để tốt cho việc học của các bạn
    Nếu các bạn cần hổ trợ hoặc hỏi đáp thì các bạn có thể liên hệ với tôi qua trang Fanpage của Facebook

    Liên hệ:
    Facebook: https://www.facebook.com/Hoàng-Thương-102789378689201
    Youtube: https://www.youtube.com/channel/UC4B1Mbk0OV71NXj45JceOIQ
    Website: thegioicokim.com
    Gmail: thegioicokim@gmail.com

Căn lề trong CSS

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 9108 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc tính margin trong CSS. Thuộc tính margin thiết lâp kích cỡ của phần khoảng trống BÊN NGOÀI đường viền.

Căn lề (Margin) trong CSS

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 7170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn lề (Margin) trong CSS. Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc tính margin trong CSS.

Căn lề text-align và vertical-align trong CSS

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 5182 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thuộc tính text-align CSS để căn lề trái, căn lề phải và thuộc tính vertical-align để căn lề trên, dưới

[CSS 04] Các thuộc tính CSS cho text – văn bản

  • Tác giả: megamind.vn
  • Đánh giá: 5 ⭐ ( 2189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đầu tiên chúng ta cùng tìm hiểu các thuộc tính CSS cho Text (văn bản). Text Styles trong CSS hiện tại có khoảng 13 thuộc tính được sử dụng, sau đây chúng ta

Text – Văn bản trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 4972 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết hướng dẫn cách định dạng văn bản trong CSS.

Căn (canh) giữa trong CSS đơn giản dễ hiểu

  • Tác giả: hocban.vn
  • Đánh giá: 5 ⭐ ( 3680 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, Hocban.vn chia sẻ đến bạn cách để căn giữa (hay còn gọi là canh giữa) phần tử trong CSS đơn giản và dễ hiểu nhất có thể.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress