Đường viền văn bản css

Đã bao giờ bạn đau đầu trong việc xử lý văn bản kéo dài hay chưa?

• Text nó cứ kéo dài mãi, bị tràn sang cả khu vực khác, muốn nó tự nhảy xuống dòng mà không được?
• Muốn ẩn bớt văn bản khi tới 1 giới hạn nào đó?
• Hoặc là muốn xóa bớt văn bản nhưng vẫn có thêm dấu. to other people know is still but text Thừa kế sau?

Thực ra đây cũng là vấn đề của rất nhiều người. Bản thân mình khi chưa có kinh nghiệm về mấy cái này thì thường hay dùng jquery để check các trường hợp. Tuy nhiên sau khi phát hiện ra 1 số thuộc tính với cách sử dụng vô cùng đơn giản thì mình đã trả lời jquery ra sau đầu ngay và luôn. Bây giờ cùng đi vào bài viết nhé

1. Tràn văn bản

Thuộc tính tràn văn bản được sử dụng để xử lý một đoạn văn bản bị tràn ra bên ngoài phần tử chứa nó bằng cách cắt giảm đoạn tràn hoặc xử lý dưới dạng dấu chấm treo ". " to make a signal for user

Hai giá trị sử dụng thường xuyên nhất là

• kẹp. cắt đoạn văn bản bị tràn ra bên ngoài (mặc định)
• dấu chấm lửng. add ba dấu chấm (. ) if text was overside. Hai thuộc tính đi kèm tràn văn bản là

white-space: nowrap;
overflow: hidden;

Ngoài ra còn có 2 giá trị khác

• ban đầu. set setting default value
• thừa kế. kế thừa giá trị từ thẻ HTML cha

cú pháp. tràn văn bản. kẹp. dấu chấm lửng. chuỗi. ban đầu. thừa kế;

.text {
   white-space: nowrap; 
   width: 200px; 
   overflow: hidden;
   border: 1px solid #000000;
}

div.a {
   text-overflow: clip; 
}

div.b {
  text-overflow: ellipsis; 
}

Kết quả hiển thị sẽ như thế này.

Phạm Thị Ngọc Mai @maiptn226

Theo dõi

4. 0K 259 56

Đã đăng vào ngày 9 tháng 11 năm 2020 8. 09 SA 4 phút đọc

24. 3k

4

10

Xử lý văn bản trong CSS như thế nào?

• Report
• Add to series of me

Bài đăng này đã không được cập nhật trong 2 năm

Chào các bạn

Đã bao giờ bạn đau đầu trong việc xử lý văn bản kéo dài hay chưa?

• Text nó cứ kéo dài mãi, bị tràn sang cả khu vực khác, muốn nó tự nhảy xuống dòng mà không được?
• Muốn ẩn bớt văn bản khi tới 1 giới hạn nào đó?
• Hoặc là muốn xóa bớt văn bản nhưng vẫn có thêm dấu. to other people know is still but text Thừa kế sau?

Thực ra đây cũng là vấn đề của rất nhiều người. Bản thân mình khi chưa có kinh nghiệm về mấy cái này thì thường hay dùng jquery để check các trường hợp. Tuy nhiên sau khi phát hiện ra 1 số thuộc tính với cách sử dụng vô cùng đơn giản thì mình đã trả lời jquery ra sau đầu ngay và luôn. Bây giờ cùng đi vào bài viết nhé

1. Tràn văn bản

Thuộc tính tràn văn bản được sử dụng để xử lý một đoạn văn bản bị tràn ra bên ngoài phần tử chứa nó bằng cách cắt giảm đoạn tràn hoặc xử lý dưới dạng dấu chấm treo ". " to make a signal for user

Hai giá trị sử dụng thường xuyên nhất là

• kẹp. cắt đoạn văn bản bị tràn ra bên ngoài (mặc định)
• dấu chấm lửng. add ba dấu chấm (. ) if text was overside. Hai thuộc tính đi kèm tràn văn bản là

white-space: nowrap;
overflow: hidden;

Ngoài ra còn có 2 giá trị khác

• ban đầu. set setting default value
• thừa kế. kế thừa giá trị từ thẻ HTML cha

cú pháp. tràn văn bản. kẹp. dấu chấm lửng. chuỗi. ban đầu. thừa kế;

.text {
   white-space: nowrap; 
   width: 200px; 
   overflow: hidden;
   border: 1px solid #000000;
}

div.a {
   text-overflow: clip; 
}

div.b {
  text-overflow: ellipsis; 
}

Kết quả hiển thị sẽ như thế này.

Vì vậy để xem lại đầy đủ đoạn văn bản thì làm như thế nào?

.text:hover {
    overflow: visible;
}

2. Gói từ

Thuộc tính word-wrap cho phép đoạn văn bản xuống hàng cho dù chữ đó dài cỡ nào đi nữa

cú pháp. gói từ. thông thường. ngắt lời. ban đầu. thừa kế;

in which

• thông thường. display by default, from long can be over the outside box (default)
• ngắt lời. đoạn văn bản nhảy xuống dòng nếu chữ quá dài, tuy nhiên có thể gây hiện tượng khen ngợi từ
• ban đầu. trở về trạng thái mặc định
• thừa kế. kế thừa giá trị từ thẻ HTML cha

div {
  width: 250px; 
  border: 1px solid #000000;
}

div.a {
  word-wrap: normal;
}

div.b {
  word-wrap: break-word;
}

Kết quả hiển thị như thế này

3. Phá vỡ từ

Word-quấn xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng

Các giá trị thường thấy là

• thông thường. display by default, from long can be over the outside box (default)
• giữ tất cả. không sử dụng được với đoạn văn bản tiếng Trung Quốc/Nhật Bản/Hàn Quốc (CJK), chức năng tương tự như bình thường. Khác biệt ở vị trí nếu từ có gạch nối sẽ được xuống dòng tại một vị trí thích hợp
• phá vỡ tất cả. khi hết đoạn, một từ sẽ tự động ngắt ở bất kỳ ký tự nào để xuống dòng, có thể gây hiện tượng đối tượng thưởng thức từ
• ngắt lời. khi hết đoạn thì sẽ tự động ngắt ở bất kỳ từ nào để xuống dòng. Nếu là văn bản bình thường, ta sẽ dùng break-word nhiều hơn, còn break-all thường chỉ dùng cho số (nếu có)

cú pháp. phá vỡ từ. thông thường. phá vỡ tất cả. giữ tất cả. ngắt lời

div {
  width: 250px; 
  border: 1px solid #000000;
}

div.a {
 word-break: normal;
}

div.b {
 word-break: keep-all;
}

div.c {
 word-break: break-all;
}

div.d {
 word-break: break-word;
}

4. Chế độ viết

Sử dụng thuộc tính write-mode để định kiểu cho đoạn văn bản được đặt theo chiều ngang hoặc chiều dọc

The value of writing-mode

• ngang-tb. đoạn văn bản sẽ được đặt theo chiều ngang từ trái sang phải, đọc từ trên xuống dưới (mặc định)
• dọc-rl. đoạn văn bản được đặt theo chiều dọc từ phải sang trái, đọc từ trên xuống dưới
• dọc-lr. đoạn văn bản được đặt theo chiều dọc từ trái sang phải, đọc từ trên xuống dưới

cú pháp. chế độ viết. ngang-tb. dọc-rl. dọc-lr

p.test1 {
  writing-mode: horizontal-tb; 
  width: 300px;
  border: 4px double red;
  padding: 15px;
}

p.test2 {
  writing-mode: vertical-rl; 
  height: 200px;
  margin-right: 50px;
  border: 4px double navy;
  padding: 15px;
}

p.test3 {
  writing-mode: vertical-lr; 
  height: 200px;
  border: 4px double green;
  padding: 15px;
}

Kết quả hiển thị như sau

Như vậy là qua bài viết của mình, có lẽ các bạn cũng đã hiểu được sơ lược cách xử lý văn bản sao cho đẹp, đơn giản và nhanh chóng rồi nhỉ?. Chúc các bạn thành công