Blog

Text and Font

Tại sao mình lại hướng dẫn các bạn học CSS3 mà không hướng dẫn học CSS trước. Hầu hết những tut của mình đều hướng đến những bạn đã có kiến thức cơ bản về lập trình web(html và css), CSS3 là bản cải tiến từ CSS, kiến thức cơ bản của CSS cũng khá là rễ để học. Nếu chưa học qua kiến thức cơ bản, bạn có thể tải tài liệu tại đây: CSS cơ bản, tìm hiểu css. Và html

Quay trở lại với bài thôi, lan man thế là đủ rồi. Văn bản là yếu tố không thể thiếu trên một website, nó quyết định nội dung cho trang web, nội dung hay thì có nhiều người đọc, vậy thôi. Vậy làm sao để trình bày nội dung một cách hợp lý, hôm nay mình sẽ hướng dẫn các bạn.

Đầu tiên là Text.

CSS3 mang lại nhiều tính năng cho thuộc tính text.

Text Overflow.

Xem đoạn code sau:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
p.text_overflow1 {
    white-space: nowrap; 
    width: 300px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}
p.text_overflow2 {
    white-space: nowrap; 
    width: 300px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
</head>
  <body>
    <p>Duoi day la hai van ban dai va khong chua trong hop.</p>

    <p>text-overflow: clip:</p>
    <p class="text_overflow1">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO</p>
    
    <p>text-overflow: ellipsis:</p>
    <p class="text_overflow2">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO</p>
  </body>
</html>

Thuộc tính Text Overflow được định nghĩa là: text-overflow.

Đoạn code trên có chứa thuộc tính white-space. Thuộc tính white-space xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.

  • white-space: normal; Dạng mặc định, khoảng trắng sẽ hiển thị bình thường.
  • white-space: nowrap; Văn bản sẽ hiện thị trên cùng một hàng, chỉ xuống dòng khi gặp thẻ <br>
  • white-space: pre; Văn bản sẽ hiển thị trên cùng một hàng, chỉ ngắt dòng tại đoạn văn bản sử dụng thẻ <pre>
  • white-space: pre-line; Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
  • white-space: pre-wrap; Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
  • white-space: inherit; Xác định thừa hưởng thuộc tính từ thành phần bao nó(thành phần cha).

Thành phần overflow: hidden; sẽ giấu văn bản khi chiều cao của box không đủ chứa.

text-overflow: clip; Xén bớt text cho vừa box.
text-overflow:ellipsis; Xén một đoạn text cho vừa box và thay thế vùng ẩn bằng dấu ba chấm.
text-overflow: “Text”; Xén một đoạn text cho vừa box và thay thế vùng ẩn bằng chuỗi khác.

Đoạn code dưới đây sẽ hiển thị nội dung khi bạn di chuột vào nội dung.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
    p.test {
        white-space: nowrap; 
        width: 200px; 
        overflow: hidden;
    }

    p.test:hover {
        overflow: visible;
}
</style>
</head>
<body>
    <p>Khi ban di chuot vao, noi dung an se duoc hien thi.</p>
    <p class="test" style="text-overflow:ellipsis;">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO</p>
    <p class="test" style="text-overflow:clip;">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO</p>
</body>
</html>

Tìm hiểu thêm trên mạng về phần tử overflow.

word-wrap và word-break.

word-wrap: break-word; Những từ quá dài sẽ xuống hàng.
word-wrap: norma; Trả về dạng mặc định ban đầu cho word-wrap
word-break: break-all; Khi hết đoạn thì một từ sẽ tự động ngắt ở bất khì chữ nào để xuống hàng(ít dùng)
word-break: normal; Trả về dạng mặc định ban đầu cho một từ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
    p.test {
        border: 1px solid black;
        width: 300px; height: 100px; 
        word-wrap: break-word;
    }
    p.test2 {
        border: 1px solid black;
        width: 300px; height: 100px; 
        word-break: break-all;
    }
}
</style>
</head>
<body>
    <p>word-wrap:break-word</p>
    <p class="test">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO-Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO-Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO
    </p>
    <p>word-break:break-all</p>
    <p class="test2">Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO-Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO-Cong ty OTVINA thiet ke Website chuyen nghiep chuan SEO
    </p>
</body>
</html>

 CSS3 Fonts

Fonts là yếu tố xác định nội dung khi thiết kế website doanh nghiệp,hoặc những website khác. Nó quyết định đến giao diện của trang web.

Fonts web cho phép bạn sử dụng phông chữ mà không được cài đặt trên máy tính. Bạn chỉ cần đặt tệp tin fonts trên máy chủ web của bạn, nó sẽ tự động được tải về cho người sử dụng khi cần thiết.