• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Hướng dẫn white-space trong css mới nhất 2020

ATPMedia Bởi ATPMedia
16/12/2019
Trang chủ công nghệ và đời sống
Rate this post

white-space trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề white-space trong css. Trong bài viết này,xaydungweb.vn sẽ viết bài viết  Hướng dẫn white-space trong css mới nhất 2020.White Space Trong Css

Hướng dẫn white-space trong css mới nhất 2020.

0 0 0 New

IFrame
IFrame
  • Posted by: Thủy Trần Thanh
  • bình luận

white-space xử lý khoảng trắng dạng trong CSS

white-space xử lý khoảng trắng dòng trong CSS

bao giờ bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng phương pháp bấm phím space liên tiếp cho đoạn văn mà bạn soạn ở chế độ html thì khi hiển thị nó cũng chỉ hiển thị là một khoảng trắng, thậm chí khoảng trắng bạn cố tình gõ ở đầu dòng thì bị loại bỏ khi hiển thị. Chúng ta sẽ tìm hiểu về thuộc tính white-space trong CSS và các giá trị của nó vừa mới quyết định đến quy phương pháp hiển thị khoảng trắng của bạn trong đoạn văn ntn.

Giả sử ta có một đoạn văn như sau được gõ ở chế độ html.

IFrame

HTML5 có lẽ là công nghệ đến muộn và mạnh mẽ nhất, nhưng một số trình duyệt luôn luôn chưa hổ trợ những thẻ mới trong HTML5, sau đây chúng ta sẽ cùng nghiên cứu những phương pháp để giải quyết chủ đề này. Từ phiên bản IE8 trở xuống k hổ trợ các phần tử trong HTML5, cũng giễ hiểu bởi vì khi chúng ra đời HTML5 vẫn chưa phát triển.

normal

#results 
   white-space: normal;
   width: 400px;
   border: 1px solid #999;

Đây là trị giá mặc định trong css, trị giá này vừa mới quyết định định dạng văn bản của bạn sẽ tự bẻ xuống tại khoảng trắng khi nó tới giới hạn của hộp bao nó, và cơ chế loại bỏ các khoảng trắng liên tiếp nhau cũng như khoảng trắng nằm ở đầu đoạn văn.

white-space

nowrap

#results 
   white-space: normal;
   width: 200px;
   border: 1px solid red;

giá trị này sẽ loại bỏ các khoảng trắng thừa nhưng định dạng văn bản sẽ k được bẻ xuống khi nó dài quá chiềug rộng hộp bao nó.

white-space

pre

 #results 
   white-space: pre;
   width: 400px;
   border: 1px solid red;

giá trị này sẽ không loại bỏ khoảng trắng thừa cũng giống như sẽ k tự động bẻ xuống định dạng tại khoảng trắng khi đoạn văn dài quá hộp bao nó, và loại văn bản mà bạn tạo bằng cách gõ phím enter sẽ được hiển thị đúng như vậy. bên cạnh đó giá trị này không sử dụng việc đúng trên IE8.

pre-line

#results 
   white-space: pre-line;
   width: 400px;
   border: 1px solid red;

trị giá này gần giống với trị giá mặc định normal chỉ có điều là dòng văn bản mà bạn tự gõ enter xuống sẽ được công nhận và hiển thị là một dòng mới. Phiên bản IE8 thì lại k hoàn toàn hiểu trị giá này mà chúng hiển thị giống với trị giá mặc định.

white-space

pre-wrap

#results 
   white-space: pre-wrap;
   width: 400px;
   border: 1px solid red;

giá trị này sẽ không loại bỏ khoảng trắng thừa và định dạng văn bản mới thực bằng hướng dẫn gõ phím enter sẽ được xác nhận. không những thế loại văn bản sẽ tự động xuống định dạng tại khoảng trắng khi nó vượt quá giới hạn của hộp. IE8 k hiểu giá trị này và hiển thị giống như trị giá mặc định.

Nguồn: internet.com
Tags: css giới hạn texthtml white spacekhông xuống dòng trong htmlstyle white space pre linetext-overflow trong csswhite-space csswhite-space trong cssword break cssword-break trong css
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Tạo ảnh Trong Suốt Online

Hướng dẫn các cách tạo ảnh trong suốt online mới nhất 2020

Bài Viết Mới.

Tổng Hợp Cách Lập Kế Hoạch Kinh Doanh Bán Hàng Mới Nhất 2020

Tổng hợp cách lập kế hoạch kinh doanh bán hàng mới nhất 2020

01/12/2019
Bài Học Kinh Nghệm Cho Người Mới Khởi Nghiệp

Những bài học cho người bắt đầu khởi nghiệp kinh doanh

19/08/2020
Cách Trỏ Tên Miền Về địa Chỉ Ip

Hướng dẫn các cách trỏ tên miền về địa chỉ ip mới nhất 2020

24/12/2019
Cổng Thanh Toán Là Gì

cổng thanh toán là gì ? Các cổng thanh toán điện tử phổ biến tại Việt Nam mới nhất 2020

29/10/2019
Khong Go Duoc Tieng Viet Tren Coc Coc

Hướng dẫn sửa lỗi khong go duoc tieng viet tren coc coc mới nhất 2020

01/12/2019
Tổng Hợp Những Cách đầu Tư Làm Giàu Mới Nhất 2020

Tổng hợp những cách đầu tư làm giàu mới nhất 2020

01/12/2019
Tổng Hợp Các Mục Tiêu Cuộc Sống để Giúp Bạn Thành Công Mới Nhất 2020

Tổng hợp các mục tiêu cuộc sống để giúp bạn thành công mới nhất 2020

30/11/2019
Bỏ Gạch Chân Trong Css

Hướng dẫn cách bỏ gạch chân trong css mới nhất 2020

21/11/2019

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.