Ký tự dòng mới của Html. Cách thêm ngắt dòng bằng thuộc tính CSS
Bài học 5.
Trong bài học này chúng ta:
1. Hãy cùng tìm hiểu cách làm cho mã html trở nên thuận tiện và dễ đọc hơn đối với chúng ta.
2. Hãy xem cách ngắt dòng văn bản một cách chính xác.
Làm cho mã html trở nên thuận tiện.
Bây giờ mã của chúng tôi đã rõ ràng và dễ đọc vì có ít văn bản và thực tế không có thẻ. Khi chúng ta tạo một trang phức tạp hơn sẽ có nhiều thẻ nên sẽ khó tìm được thẻ phù hợp.
Để tránh sự lộn xộn của các thẻ, ban đầu bạn cần sắp xếp các thẻ và dòng sao cho chúng dễ nhận biết hơn. Khi trình duyệt đọc thông tin từ một trang html, việc có bao nhiêu khoảng trắng hoặc dòng trống trong mã không quan trọng.
Tôi đã thay đổi văn bản trong mã trang so với văn bản chúng tôi đã tạo nhưng điều đó không thành vấn đề. Hình ảnh bên trái và bên phải hiển thị cùng một mã. Cả hai tùy chọn sẽ được trình duyệt hiển thị trên màn hình điều khiển giống hệt nhau. Đồng ý rằng, làm việc với mã hiển thị bên phải sẽ dễ dàng hơn nhiều so với mã bên trái.
Đoạn mã mà chúng ta đang xem xét rất đơn giản, nhưng ngay cả bây giờ sự khác biệt trong nhận thức trực quan vẫn có thể nhận thấy được. Không có quy tắc cụ thể nào cho việc “sắp xếp mọi thứ theo trật tự”, mỗi bậc thầy tự quyết định cách làm việc thuận tiện hơn cho mình.
Ngắt dòng HTML. Gắn thẻ <br>.
Hãy chú ý đến hình ảnh. Trong phiên bản đầu tiên, văn bản được viết thành một dòng, trong phiên bản thứ hai, văn bản được viết thành hai dòng.
Trình duyệt sẽ hiển thị cả hai tùy chọn giống nhau. Văn bản sẽ được viết trong một dòng:
Bạn hỏi tại sao lại thế này? Thật vậy, ở một trong các mã, một phần văn bản được chuyển sang dòng khác. Sẽ là hợp lý nếu trong trình duyệt một số văn bản cũng được chuyển sang dòng khác, nhưng html có logic riêng về vấn đề này. Nếu chúng ta ngắt dòng trong mã html thì đối với trình duyệt, điều này tương đương với một khoảng trắng(như khoảng trắng thông thường giữa các từ trong văn bản). Nếu chúng ta di chuyển một phần văn bản không phải xuống một dòng mà là 2 hoặc 3 (bất kỳ số nào) thì trình duyệt vẫn coi khoảng cách này là khoảng cách thông thường giữa các từ và khi hiển thị trên màn hình, văn bản sẽ được viết thành một dòng. .
Gắn thẻ <br>
Khi chúng ta làm quen với thẻ ở bài thứ 3, tôi đã đề cập rằng có những thẻ không cần đóng. Nhãn <br> một trong số chúng được sử dụng để ngắt dòng.
Hãy áp dụng nó trong mã:
Chúng tôi đã chèn một thẻ <br> vào mã html của chúng tôi và bây giờ khi bạn khởi chạy tệp qua trình duyệt, một phần văn bản sẽ được chuyển sang dòng tiếp theo.
* Đừng quên lưu các thay đổi trong Notepad (Ctrl + S) và làm mới trang trong trình duyệt (F5).
Thường cần phải ngắt dòng văn bản bên trong một ô Excel thành một dòng mới. Nghĩa là di chuyển văn bản dọc theo các dòng bên trong một ô như được chỉ ra trong hình. Nếu sau khi nhập phần đầu tiên của văn bản, bạn chỉ cần nhấn phím ENTER, con trỏ sẽ được chuyển sang dòng tiếp theo, nhưng đến một ô khác và chúng ta cần chuyển trong cùng một ô.
Đây là một tác vụ rất phổ biến và có thể được giải quyết rất đơn giản - để di chuyển văn bản sang một dòng mới bên trong một ô Excel, bạn cần nhấp vào ALT+ENTER(giữ phím ALT, sau đó không nhả phím, nhấn phím ENTER)
Cách ngắt dòng văn bản trên một dòng mới trong Excel bằng công thức
Đôi khi bạn cần ngắt dòng không chỉ một lần mà còn sử dụng các hàm trong Excel. Giống như trong ví dụ này trong hình. Chúng tôi nhập tên, họ và họ và nó sẽ tự động được thu thập trong ô A6
Trong cửa sổ mở ra, trong tab “Căn chỉnh”, bạn phải chọn hộp bên cạnh “Bọc Word” như được chỉ ra trong hình, nếu không việc ngắt dòng trong Excel sẽ không được hiển thị chính xác bằng các công thức.
Cách thay dấu gạch ngang trong Excel bằng ký tự khác và ngược lại bằng công thức
Có thể thay đổi ký hiệu dấu gạch nối thành bất kỳ ký tự nào khác, ví dụ về khoảng trắng, sử dụng hàm văn bản SUBSTITUTE trong Excel
Hãy lấy một ví dụ về những gì trong hình trên. Vì vậy, trong ô B1 chúng ta viết hàm SUBSTITUTE:
THAY THẾ(A1,CHAR(10), "")
A1 là văn bản của chúng tôi có ngắt dòng;
CHAR(10) là dấu ngắt dòng (chúng tôi đã xem xét vấn đề này kỹ hơn một chút trong bài viết này);
" " là khoảng trắng vì chúng tôi đang thay đổi ngắt dòng thành khoảng trắng
Nếu bạn cần thực hiện thao tác ngược lại - thay thế khoảng trắng bằng dấu gạch nối (ký hiệu), thì hàm sẽ như sau:
THAY THẾ(A1; " ";CHAR(10))
Hãy để tôi nhắc bạn rằng để các ngắt dòng được phản ánh chính xác, bạn phải chỉ định “Bọc ngang dòng” trong thuộc tính ô, trong phần “Căn chỉnh”.
Cách đổi dấu gạch nối thành dấu cách và ngược lại trong Excel bằng TÌM KIẾM - REPLACE
Đôi khi việc sử dụng sữa công thức không thuận tiện và việc thay thế cần phải được thực hiện nhanh chóng. Để làm điều này, chúng tôi sẽ sử dụng Tìm kiếm và Thay thế. Chọn văn bản của chúng tôi và nhấn CTRL+H, cửa sổ sau sẽ xuất hiện.
Nếu chúng ta cần thay đổi ngắt dòng thành dấu cách, thì trong dòng “Tìm”, chúng ta cần nhập ngắt dòng, để làm điều này đứng trong trường “Tìm”, sau đó nhấn phím ALT, không nhả phím, gõ 010 trên bàn phím - đây là mã ngắt dòng, nó sẽ không hiển thị trong trường này.
Sau đó, trong trường “Thay thế bằng”, nhập dấu cách hoặc bất kỳ ký tự nào khác mà bạn cần thay đổi và nhấp vào “Thay thế” hoặc “Thay thế tất cả”.
Nhân tiện, điều này được thực hiện rõ ràng hơn trong Word.
Nếu bạn cần thay đổi ký tự ngắt dòng thành khoảng trắng, thì trong trường “Tìm”, bạn cần chỉ ra mã “Ngắt dòng” đặc biệt, được ký hiệu là ^l
Trong trường “Thay thế bằng:”, bạn chỉ cần tạo khoảng trắng và nhấp vào “Thay thế” hoặc “Thay thế tất cả”.
Bạn có thể thay đổi không chỉ ngắt dòng mà còn cả các ký tự đặc biệt khác, để lấy mã tương ứng, bạn cần nhấp vào nút “Thêm >>”, “Đặc biệt” và chọn mã bạn cần. Hãy để tôi nhắc bạn rằng chức năng này chỉ có trong Word, những ký hiệu này sẽ không hoạt động trong Excel.
Cách đổi dòng ngắt dòng thành dấu cách hoặc ngược lại trong Excel bằng VBA
Hãy xem một ví dụ cho các ô được chọn. Tức là chúng ta chọn các ô cần thiết và chạy macro
1. Thay đổi dấu cách thành dấu gạch nối trong các ô đã chọn bằng VBA
Dấu cách phụToHyphens()
Đối với mỗi ô trong vùng chọn
cell.Value = Thay thế(cell.Value, Chr(32) , Chr(10) )
Kế tiếp
Kết thúc phụ
2. Thay đổi dấu gạch nối thành dấu cách trong các ô đã chọn bằng VBA
Sub WrapsToSpaces()
Đối với mỗi ô trong vùng chọn
cell.Value = Thay thế(cell.Value, Chr(10) , Chr(32) )
Kế tiếp
Kết thúc phụ
Mã rất đơn giản: Chr (10) là dấu ngắt dòng, Chr (32) là khoảng trắng. Nếu cần đổi sang ký hiệu nào khác thì chỉ cần thay số mã tương ứng với ký hiệu được yêu cầu là được.
Mã ký tự cho Excel
Hình ảnh bên dưới hiển thị các ký hiệu khác nhau và mã tương ứng của chúng; một số cột biểu thị các phông chữ khác nhau. Để phóng to hình ảnh, bấm vào hình ảnh.
Khi hiển thị tài liệu văn bản trong trình duyệt, vị trí ngắt dòng trong đoạn văn được xác định tự động tùy thuộc vào kích thước phông chữ và kích thước của cửa sổ xem. Việc ngắt dòng chỉ có thể được thực hiện bằng cách sử dụng các ký tự phân cách từ (ví dụ: dấu cách). Đôi khi trong tài liệu, bạn cần đặt nguồn cấp dữ liệu bắt buộc, nguồn cấp dữ liệu này được triển khai bất kể cài đặt trình duyệt. Điều này được thực hiện bằng cách sử dụng thẻ nguồn cấp dữ liệu bắt buộc.
, không có thẻ đóng tương ứng. Kích hoạt thẻ
vào văn bản tài liệu sẽ đảm bảo rằng văn bản tiếp theo được đặt ở đầu dòng mới. Ví dụ: cách tiếp cận này có thể được sử dụng để tạo cấu trúc kiểu danh sách mà không cần sử dụng các thẻ đánh dấu danh sách đặc biệt. Hoặc, ví dụ, thẻ này không thể được sử dụng để hiển thị các bài thơ, v.v.
Đây là một ví dụ về việc sử dụng nguồn cấp dữ liệu bắt buộc (Hình 1.8):
Petrograd tối tăm
Tháng 11 hít thở cái se lạnh của mùa thu.
Bắn tung tóe với một làn sóng ồn ào
Đến các cạnh của hàng rào mảnh mai của bạn,
Neva trằn trọc như người bệnh
Bồn chồn trên giường của tôi.
A.S Pushkin. Kỵ sĩ đồng
Cơm. 1.8. Nhãn
có thể được sử dụng để buộc một nguồn cấp dữ liệu
Không giống như thẻ đoạn văn
Khi sử dụng thẻ
một chuỗi trống sẽ không được tạo ra.
Sử dụng thẻ
cần thận trọng - có thể trình duyệt đã ngắt dòng một hoặc hai từ trước khi gặp thẻ của bạn
. Điều này xảy ra nếu chiều rộng cửa sổ trình xem của trình đọc nhỏ hơn cùng cài đặt của chương trình mà bạn đã kiểm tra tài liệu của mình. Trong trường hợp này, có thể chỉ còn lại một từ trên một dòng ở giữa đoạn văn, do đó làm hỏng vẻ đẹp của bố cục tài liệu.
Ghi chú
Khi sử dụng thẻ
Để ngắt văn bản xung quanh hình ảnh hoặc bảng, bạn có thể đặt tham số CLEAR để dừng ngắt dòng văn bản. Bạn có thể đọc về điều này trong chương 3 và 4.
Thẻ bạn
Có những tình huống bạn cần thực hiện thao tác ngược lại - tắt nguồn cấp dữ liệu dòng. Có một thẻ container cho việc này
Ghi chú
Để đảm bảo tính liên tục của văn bản nằm trong các ô của bảng, có một tham số đặc biệt của thẻ NOWRAP
Đánh dấu văn bản bằng thẻ dòng không ngắt
, không cần thẻ đóng.
Ghi chú
Nhãn
Khi tạo bố cục, quản trị viên web định kỳ đặt ra câu hỏi: văn bản sẽ được chuyển như thế nào? Trong hầu hết các trường hợp, trình duyệt tự xử lý tác vụ này. Nhưng đôi khi quá trình này phải được kiểm soát, đặc biệt là khi định dạng các từ và cụm từ dài mà nếu dịch sai sẽ mất nghĩa.
thuộc tính bao bọc từ
Trong HTML có một thẻ đặc biệt để phân cách các dòng
. Nhưng việc sử dụng quá thường xuyên nó bị các nhà phát triển coi là hành vi xấu và thường cho thấy sự thiếu chuyên nghiệp. Để chứng minh, hãy tưởng tượng bạn có một logo và bạn muốn mỗi chữ cái bắt đầu trên một dòng mới:
Kết quả là mã cồng kềnh và xấu sẽ gây sốc văn hóa cho bất kỳ nhà phát triển nào. Và bạn nên làm gì nếu muốn logo được đặt theo chiều ngang trên phiên bản dành cho máy tính để bàn và theo chiều dọc nếu chiều rộng màn hình nhỏ hơn 550 pixel? Do đó, hãy luôn sử dụng Cascading Style Sheets để tùy chỉnh giao diện của các phần tử. Hơn nữa, với sự trợ giúp của các công cụ CSS, việc ngắt dòng được thực hiện một cách tinh tế hơn. Trong trường hợp này, không có đánh dấu dư thừa, điều này chỉ làm giảm tốc độ tải trang.
Thuộc tính đầu tiên bạn nên truy cập để xử lý văn bản là word-wrap. Chấp nhận ba giá trị: normal, break-all và keep-all. Để làm việc, bạn chỉ cần nhớ break-all. Bình thường là mặc định và không có ích gì khi chỉ định nó. Giữ tất cả có nghĩa là ngăn chặn ngắt dòng trong tài liệu CSS. Được thiết kế đặc biệt cho các ký tự tiếng Trung, tiếng Nhật và tiếng Hàn. Do đó, nếu bạn không viết blog bằng một trong những ngôn ngữ này, thuộc tính sẽ không hữu ích cho bạn. Nó cũng không được hỗ trợ bởi trình duyệt Safari và điện thoại di động iOS.
Để gán mỗi chữ cái cho một dòng mới bằng CSS cho logo từ ví dụ trước, bạn cần viết đoạn mã sau:
P( phông chữ: in đậm 30px Helvetica, sans-serif; chiều rộng: 25px; word-wrap: break-all; )
Chiều rộng và kích thước của phông chữ được chọn sao cho chỉ có đủ khoảng trống cho một chữ cái. Word-wrap với giá trị break-all yêu cầu trình duyệt ngắt từ thành một dòng mới mỗi lần. Tài sản này không thể được gọi là không thể thay thế. Nhưng nó rất hữu ích khi thiết kế các khối văn bản nhỏ, chẳng hạn như các trường để nhập nhận xét.
thuộc tính khoảng trắng
Một lỗi phổ biến mà các nhà phát triển web mới mắc phải là cố gắng chỉnh sửa văn bản bằng dấu cách hoặc phím Enter, sau đó tự hỏi tại sao nỗ lực của họ không hiển thị trên trang. Dù bạn nhấn Enter bao nhiêu lần thì trình duyệt cũng sẽ bỏ qua. Nhưng có một cách để nó hiển thị văn bản theo cách bạn muốn, có tính đến cả khoảng cách.
Trong tài liệu CSS, ngắt dòng được chỉ định bằng thuộc tính khoảng trắng có thể được định cấu hình để tôn trọng khoảng trắng hoặc nhấn tổ hợp phím Enter. Khoảng trắng có giá trị ở đầu dòng sẽ buộc trình duyệt nhìn thấy Enter trong văn bản.
Nếu bạn thay đổi dòng trước thành gói trước trong mã CSS của mình, việc ngắt dòng sẽ tính đến khoảng trắng. Và ngược lại, cấm mọi sự bao bọc bằng cách gán cho văn bản một thuộc tính khoảng trắng với giá trị nowrap:
#wrapper p( màu: #FFF; phần đệm: 10px; phông chữ: in đậm 16px Helvetica, sans-serif; khoảng trắng: nowrap; )
Tràn văn bản
Một công cụ hữu ích khác để làm việc với văn bản là tràn văn bản. Ngoài ngắt dòng, thuộc tính CSS cho phép bạn cắt bớt nội dung khi vùng chứa đầy. Nhận hai giá trị:
- clip - chỉ cần cắt bớt văn bản;
- dấu chấm lửng - thêm dấu chấm lửng.
Để thuộc tính hoạt động, phần tử cũng phải được đặt để cấm ngắt dòng và tràn giá trị ẩn.
văn bản CSS3 Bao gồm các thuộc tính văn bản để giúp giải quyết các vấn đề về ngắt dòng và cắt bớt văn bản trong nội dung.
Thuộc tính CSS3 để định dạng văn bản
1. Cắt bớt dòng tràn văn bản
Thuộc tính cho phép bạn giới hạn độ dài của văn bản khi nó không vừa với vùng chứa, cắt nó đi một cách trực quan hoặc hiển thị nó bằng hình elip. Thuộc tính chỉ hoạt động nếu các điều kiện sau được chỉ định: phải xác định chiều rộng của vùng chứa, phần tử phải có các giá trị tràn: ẩn và khoảng trắng: nowrap. Không được thừa kế.
Cú pháp
P (chiều rộng: 300px; tràn: ẩn; khoảng trắng: nowrap; tràn văn bản: dấu chấm lửng; ) Hình. 1. Cắt văn bản bằng thuộc tính text-overflow
2. Dấu gạch nối trong từ ngắt từ
Trong tình huống bình thường, các từ được gạch nối sang một dòng khác nơi có dấu cách hoặc dấu gạch nối ("dấu gạch nối mềm") hoặc trong trường hợp gạch nối bắt buộc bằng cách sử dụng phần tử
. Thuộc tính này cho phép bạn đặt quy tắc gạch nối trong các từ để các dòng dài lấp đầy hoàn toàn khoảng trống bên trong vùng chứa. Không dùng cho ngôn ngữ CJK (Trung-Nhật-Hàn). Thừa hưởng.
Cú pháp
P (ngắt từ: bình thường;) p (ngắt từ: ngắt tất cả;) p (ngắt từ: giữ tất cả;)
3. Ngắt dòng trong dòng word-wrap
Nó được sử dụng trong trường hợp văn bản không vừa với vùng chứa của nó và vượt ra ngoài đường viền của nó. Cho phép bạn ngắt các từ dài và chuyển chúng sang dòng tiếp theo. Thừa hưởng. Chỉ kích hoạt nếu giá trị khoảng trắng cho phép ngắt dòng.
