- Thẻ
dùng để chèn một ngắt xuống dòng

Nội dung chính Show

• Hiển thị HTML
• Hiệu quả
• Đừng quên thẻ đóng
• Thẻ xuống thể loại
• Sự cố của các bài thơ
• kết quả
• Hiệu quả
• Đọc qua thêm các thẻ HTML

- Thẻ
thường được đặt bên trong đoạn văn để ngắt văn bản xuống dòng, hoặc đặt giữa hai phần tử để tạo khoảng cách giữa hai phần tử.

    
LẬP
TRÌNH
WEB
    
Tài liệu hướng dẫn học HTML
    




    
Tài liệu hướng dẫn học CSS

Xem ví dụ

- Lưu ý:

• Thẻ
  là thẻ đơn, nên nó không có thẻ đóng.
• Trong XHTML, để dùng thẻ
  thì ta phải thêm dấu gạch chéo thành
  

Ký tự xuống dòng trong html là một lệnh rất thường dùng trong ngôn ngữ lập trình html rất đơn giản và thuận tiện khi muôn sử dụng ký tự xuống dòng trong html. Trong bài viết này, lamweb.vn sẽ viết bài viết Hướng dẫn các ký tự xuống dòng trong html mới nhất 2021

Chú ý : mặc định nếu chuỗi bao gồm các từ ngắn có ngắt khoảng trắng thì chuỗi sẽ tự động xuống dòng, chỉ với trường hợp chuỗi nhập vào là 1 chuỗi liền nhau không có khoảng trắng  ngắt từ [thì sẽ bị hiểu là 1 từ] ta mới phải dùng cách này. Tuy nhiên cách tốt nhất khi design ta lên thêm thuộc tính đó vào vì không thể biết trước được người dùng sẽ nhập cái gì.

Bài viết này webaffiliatevn.com sẽ giới thiệu và hướng dẫn cho bạn biết cách xuống dòng trong HTML [ hay thêm đoạn ngắt dòng trong HTML ].

Theo mặc định, các trình duyệt sẽ bỏ qua nhiều tổ hợp phím định dạng mà các bạn thường sử dụng trên máy tính. Ví dụ bao gồm các phím Phím Enter và Thẻ Tab và nhiều cách sử dụng phím cách. Để thực hiện các tác vụ tương tự trong HTML, bạn sử dụng thẻ định dạng trang.

Trình duyệt web tự động ngắt văn bản sang dòng tiếp theo khi dòng hiện tại đến bên phải trình duyệt. Khi bạn thêm ngắt dòng trong HTML, bạn tránh đươc văn bản của mình ngắt xuống dòng vô cớ và bắt đầu văn bản mới dòng tiếp theo. Để thêm ngắt dòng vào mã HTML của bạn, bạn sử dụng thẻ
. Thẻ
không có thẻ kết thúc. Bạn cũng có thể thêm các dòng bổ sung giữa các đoạn bằng cách sử dụng thẻ
. Mỗi thẻ
bạn nhập sẽ tạo một dòng trống khác.

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

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

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

4,2 ★ 10 👨 65.489

#CSS

0 Bình luận

Sắp xếp theo

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

Bạn nên đọc

• Cách xem video chung trên Facebook Messenger
• Đánh giá Nikon D3000
• Cách tạo nhiều ảnh kích thước khác nhau cùng lúc
• 7 mẹo phong thủy giúp bạn thăng tiến nhanh như "diều gặp gió”
• Phải chăng Nam Cực từng được bao phủ bởi các rừng cận nhiệt đới tươi tốt?

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
  • 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-2022 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.