Ví dụ

HTML viết:

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

CSS viết:

p {
    border: 1px solid #cc0000;
    width: 150px;
}

Hiển thị trình duyệt khi chưa có word-wrap:

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

Thêm thuộc tính word-wrap vào CSS:

p {
    border: 1px solid #cc0000;
    width: 150px;
    word-wrap: break-word;
}

Hiển thị trình duyệt khi có word-wrap:

HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN

Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout [bố cục] của trang.

Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.freehost.page

Bạn dễ dàng thấy tên miền www.freehost.page bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu:

1.vnexpress.net

2.dantri.vn

3.www.google.com

4.www.freehost.page

Kết quả:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.freehost.page

Như bạn đã thấy, một từ dài đã không còn tràn ra ngoài nữa mà bị ngắt rồi xuống dòng kế tiếp [bình thường thì không thể ngắt được, vì nó thuộc về cùng một từ]

Ngoài giá trị break-word, còn có giá trị khác là normal. Giá trị normal là dạng mặc định, tức là từ quá dài sẽ tràn ra khỏi layout.

Cú pháp tổng quát: 

word-wrap: normal | break-word; 

Dĩ nhiên là bạn chỉ được chọn một trong 2 giá trị thôi nhá, hoặc là normal, hoặc là break-word.

Câu hỏi: liệu còn cách nào để tránh tràn trong diện tích hẹp như vậy không?

Câu trả lời là có. Bạn có thể dùng thuộc tính overflow. Chẳng hạn tôi có thể sửa hộp trên như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.freehost.page

Tuy nhiên như bạn đã biết [hoặc bây giờ sẽ biết] đối với người dùng thì thanh cuộn dọc hoàn toàn OK nhưng họ không ưa thanh cuộn ngang cho lắm. Vì vậy word-wrap vẫn hữu ích hơn trong trường hợp này.

Bài viết này Quantrimang.com sẽ cùng bạn tìm hiểu cách xử lý đoạn text quá dài gây tình trạng tràn ra ngoài phần tử chứa nó bằng cách sử dụng các thuộc tính:

• text-overflow
• word-wrap
• word-break
• writing-mode

Text Overflow

Thuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng "..." để làm dấu hiệu cho người dùng.

Hai giá trị thường dùng nhất là:

• clip: cắt bớt đoạn text bị tràn ra ngoài [mặc định].
• ellipsis: thêm ba dấu chấm [...] nếu text bị tràn ra ngoài.

Hai thuộc tính đi kèm text-overflow là:

• white-space: nowrap;
• overflow: hidden;

Ví dụ 1: Xử lý text tràn ra ngoài.

p.test1 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Kết quả hiển thị:

Code đầy đủ:

 
body {font-family: arial;} 
p.test1 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
} 




Thuộc tính text-overflow
Đoạn sau chứa văn bản dài bị tràn ra ngoài box chứa nó.

text-overflow: clip:
Quantrimang.com là mạng xã hội về khoa học công nghệ

text-overflow: ellipsis:
Quantrimang.com là mạng xã hội về khoa học công nghệ

Ví dụ 2: Hiển thị nội dung bị tràn khi di chuột qua phần tử:

div.test:hover {
  overflow: visible;
}

 
body {font-family: arial;} 
div.test {
  white-space: nowrap; 
  width: 300px; 
  overflow: hidden; 
  border: 1px solid #000000;
}

div.test:hover {
  overflow: visible;
}




Di chuột qua hai div bên dưới, để xem toàn bộ đoạn text.
Quantrimang.com là mạng xã 
hội về khoa học công nghệ


Quantrimang.com là mạng xã hội 
về khoa học công nghệ

Word Wrap

Thuộc tính word-wrap cho phép đoạn text xuống dòng nếu quá dài, có thể gây hiện tượng đứt gãy một từ.

Hai giá trị tiêu biểu nhất là:

• normal: hiển thị theo mặc định, từ dài có thể bị tràn ra ngoài box [mặc định]
• break-word: đoạn text nhảy xuống dòng nếu chữ quá dài, có thể gây hiện tượng đứt gãy từ.

Ví dụ: Xử lý đoạn text quá dài

p1 {
word-wrap: normal;
}

p2 {
  word-wrap: break-word;
}

Kết quả hiển thị:

Code đầy đủ:

 
body {font-family: arial;} 
p.test1 {
  width: 15em; 
  border: 1px solid #000000;
  word-wrap: normal; /* không có thuộc tính giá trị này kết quả vẫn vậy, mặc 
  định của trình duyệt */
}

p.test2 {
width: 15em; 
border: 1px solid #000000;
word-wrap: break-word;
}




Thuộc tính word-wrap

WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng xã hội về khoa 
học công nghệ.
WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng xã hội về khoa 
học công nghệ.

Word Break

Word-wrap 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à:

• normal: hiển thị theo mặc định, từ dài có thể bị tràn ra ngoài box [mặc định]
• keep-all: không sử dụng với các đoạn text tiếng Trung Quốc/Nhật Bản/Hàn Quốc [CJK], chức năng tương tự với normal. Khác biệt ở chỗ nếu từ có gạch nối sẽ được xuống dòng tại một vị trí thích hợp.
• break-all: khi hết đoạn thì 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 đứt gãy từ.
• break-word: 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ó].

Ví dụ: Thuộc tính work-break xác định kiểu xuống dòng

p.a {
  word-break: normal;
}

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

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

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

body {font-family: arial;} 
p {
width: 240px; 
border: 1px solid #000000;
}

p.a {
  word-break: normal;
}

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

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

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




Thuộc tính word-break

word-break: normal [mặc định]:
WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng xã hội về khoa học 
công nghệ.

  



word-break: keep-all:
WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng-xã-hội-về-khoa-học-
công-nghệ.

word-break: break-all:
WebsiteQuảnTrịMạng là mạng xã hội về khoa học công nghệ.

word-break: break-all:
WebsiteQuảnTrịMạng là mạng xã hội về khoa học công nghệ.

Writing Mode

Thuộc tính writing-mode sử dụng để định kiểu cho đoạn text được đặt theo chiều ngang hay chiều dọc.

Các giá trị của writing-mode:

• horizontal-tb: đoạn text sẽ được đặt theo chiều ngang từ trái sang phải, đọc từ trên xuống dưới [mặc định].
• vertical-rl: đoạn text được đặt theo chiều dọc từ phải sang trái, đọc từ trên xuống dưới.
• vertical-lr: đoạn text được đặt theo chiều dọc từ trái sang phải, đọc từ trên xuống dưới.

Ví dụ: Sử dụng writing-mode

p.test1 {
  writing-mode: horizontal-tb; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

p.test3 {
  writing-mode: vertical-lr; 
}

Kết quả hiển thị:

Code đầy đủ:

 
body {font-family: arial;} 
p::first-letter {
  color: purple;
  font-size: xx-large;
}
p.test1 {
  writing-mode: horizontal-tb; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

p.test3 {
  writing-mode: vertical-lr; 
}



The writing-mode Property

writing-mode: horizontal-tb;
Bạn có thể trở thành một phần của Quantrimang.com bằng cách 
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung 
của mạng xã hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản 
và đăng bài trực tiếp trên Quantrimang.com.

writing-mode: vertical-rl; 
Bạn có thể trở thành một phần của Quantrimang.com bằng cách 
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung 
của mạng xã hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản 
và đăng bài trực tiếp trên Quantrimang.com.

writing-mode: vertical-lr; 
Bạn có thể trở thành một phần của Quantrimang.com bằng cách 
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung 
của mạng xã hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản 
và đăng bài trực tiếp trên Quantrimang.com.

Bài trước: Hiệu ứng Shadow trong CSS

Bài tiếp: Sử dụng Web Font trong CSS

• Text - Văn bản trong CSS
• Cách chèn CSS để tạo kiểu cách cho trang HTML
• 11 công cụ hữu ích để kiểm tra và tối ưu hóa các file CSS
• Top 5 CSS Framework phổ biến mà bạn cần lưu ý

Thứ Ba, 07/05/2019 11:40

4,2 ★ 10 👨 66.274

#CSS

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bạn nên đọc

• Sony A77 lộ diện
• Cách chụp ảnh RAW trên iPhone
• Android Market bổ sung tính năng mới hữu ích
• Cách gọi video nhóm trên Zalo PC
• Cách mở tài khoản VietinBank online ngay tại nhà

CSS và CSS3

• TOP code CSS xếp hạng sao [Star Rating] đẹp cho website

CSS và CSS3

• CSS cơ bản
  • Giới thiệu CSS
  • Cú pháp và Selector CSS
  • Vị trí đặt CSS
  • CSS - Color
  • CSS - Background
  • CSS - Border
  • CSS - Margin
  • CSS - Padding
  • CSS - Width và Height
  • CSS - Box Model
  • CSS - Outline
  • CSS - Text
  • CSS - Font
  • CSS - Icon
  • CSS - Link
  • CSS - Tạo List
  • CSS - Table
  • CSS - Display
  • CSS - Max-width
  • CSS - Position
  • CSS - Overflow
  • CSS - Float và Clear
  • CSS - Inline-block
  • CSS - Align
  • CSS - Combinator
  • CSS - Pseudo-Class
  • CSS - Pseudo-Element
  • CSS - Opacity
  • CSS - Navigation Bar
  • CSS - Dropdown
  • CSS - Image Gallery
  • CSS - Image Sprite
  • CSS - Attribute Selector
  • CSS - Form
  • CSS - Counter
  • CSS - Layout
  • CSS - Unit
  • CSS - Specificity
• CSS nâng cao
  • CSS - Rounded Corner
  • CSS - Border Image
  • CSS - Multiple Background
  • CSS - Color
  • CSS - Gradient
  • CSS - Shadow Effect
  • CSS - Text Effect
  • CSS - Web Font
  • CSS - 2D Transform
  • CSS - 3D Transform
  • CSS - Transition
  • CSS - Animation
  • CSS - Tooltip
  • CSS - Flexbox
  • CSS - Button
  • CSS- @media
  • Tạo hiệu ứng hover nút bằng CSS

• Công nghệ
  • Ứng dụng
  • Hệ thống
  • Game - Trò chơi
  • iPhone
  • Android
  • Linux
  • Nền tảng Web
  • Đồng hồ thông minh
  • Chụp ảnh - Quay phim
  • macOS
  • Phần cứng
  • Thủ thuật SEO
  • Kiến thức cơ bản
  • Raspberry Pi
  • Dịch vụ ngân hàng
  • Lập trình
  • Dịch vụ công trực tuyến
  • Dịch vụ nhà mạng
  • Nhà thông minh
• Download
  • Ứng dụng văn phòng
  • Tải game
  • Tiện ích hệ thống
  • Ảnh, đồ họa
  • Internet
  • Bảo mật, Antivirus
  • Họp, học trực tuyến
  • Video, phim, nhạc
  • Mail
  • Lưu trữ đám mây
  • Giao tiếp, liên lạc, hẹn hò
  • Hỗ trợ học tập
  • Máy ảo
• Tiện ích
• Khoa học
  • Khoa học vui
  • Khám phá khoa học
  • Bí ẩn - Chuyện lạ
  • Chăm sóc Sức khỏe
  • Khoa học Vũ trụ
  • Khám phá thiên nhiên
• Điện máy
  • Tủ lạnh
  • Tivi
  • Điều hòa
  • Máy giặt
• Cuộc sống
  • Kỹ năng
  • Món ngon mỗi ngày
  • Làm đẹp
  • Nuôi dạy con
  • Chăm sóc Nhà cửa
  • Kinh nghiệm Du lịch
  • Halloween
  • Mẹo vặt
  • Giáng sinh - Noel
  • Tết 2023
  • Quà tặng
  • Giải trí
  • Là gì?
  • Nhà đẹp
  • TOP
  • Phong thủy
• Video
  • Công nghệ
  • Cisco Lab
  • Microsoft Lab
  • Video Khoa học
• Ô tô, Xe máy
  • Giấy phép lái xe
• Làng Công nghệ
  • Tấn công mạng
  • Chuyện công nghệ
  • Công nghệ mới
  • Trí tuệ nhân tạo [AI]
  • Anh tài công nghệ
  • Bình luận công nghệ
  • Tổng hợp
• Học CNTT
  • Quiz công nghệ
  • Microsoft Word 2016
  • Microsoft Word 2013
  • Microsoft Word 2007
  • Microsoft Excel 2019
  • Microsoft Excel 2016
  • Hàm Excel
  • Microsoft PowerPoint 2019
  • Microsoft PowerPoint 2016
  • Google Sheets - Trang tính
  • Code mẫu
  • Photoshop CS6
  • Photoshop CS5
  • HTML
  • CSS và CSS3
  • Python
  • Học SQL
  • Lập trình C
  • Lập trình C++
  • Lập trình C#
  • Học HTTP
  • Bootstrap
  • SQL Server
  • JavaScript
  • Học PHP
  • jQuery
  • Học MongoDB
  • Unix/Linux
  • Học Git
  • NodeJS

Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: info@meta.vn. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.