Thủ thuật it



truy Lượt Xem:10091

Cách sửa trang web nơi văn bản quá rộng

Web là một nơi tuyệt vời, nhưng đôi khi các trang không hoạt động cho tôi. Nó không phải là nội dung, nhưng cách chúng hiển thị. Tôi sẽ tìm một trang web có văn bản rất rộng hoặc thậm chí toàn màn hình. Trên một số màn hình, điều này hoạt động tốt. Lần khác, chiều rộng làm cho việc đọc trang khó đọc hơn. Đôi mắt của bạn phải kéo dài toàn màn hình và nó mệt mỏi hơn. Tuy nhiên, với việc sử dụng trình duyệt của bạn và một vài chỉnh sửa, bạn có thể sửa các trang có văn bản quá rộng.
 
Chỉ cần rõ ràng, đây không phải là giải pháp lâu dài. Điều đó sẽ tuyệt vời nếu bạn có thể thay đổi trang web của người khác. Tuy nhiên, bản sửa lỗi sẽ hoạt động cho đến khi bạn làm mới trang hoặc chuyển sang trang khác.
 
Những gì chúng ta sẽ làm là tạo 2 thay đổi CSS cho trang. Tin tốt là bạn không cần phải biết CSS hoặc là một nhà phát triển. Chúng tôi sẽ sử dụng các công cụ trình duyệt tích hợp sẵn.
 
Ảnh chụp màn hình bên dưới minh họa vấn đề này. Đó là một bài đăng trên blog tuyệt vời nhưng văn bản chiếm phần lớn chiều rộng màn hình. Tôi cũng thấy vấn đề này với một số trang chính sách bảo mật. Trong những tình huống đó, tôi tự hỏi liệu nó có ý định làm cho độc giả rời khỏi trang hay không.
 
Trang web nơi văn bản lấp đầy chiều rộng màn hình
 
Trang web nơi văn bản lấp đầy chiều rộng màn hình
 
Tôi có thể thay đổi kích thước cửa sổ trình duyệt của mình và chỉnh sửa trang. Nhưng, tôi thích có trình duyệt của tôi có chiều rộng đầy đủ. Bạn có thể cảm thấy khác nhau. Thay vào đó, tôi sẽ thay đổi chiều rộng của vùng văn bản.

 

Giảm vùng chiều rộng của văn bản

Giảm vùng chiều rộng của văn bản

Tìm vùng văn bản cần thay đổi

Các bước dưới đây sẽ hoạt động đối với hầu hết các trình duyệt. Đối với các bước này, tôi sẽ sử dụng Google Chrome. Bạn sẽ nhận được kết quả tương tự với Mozilla Firefox hoặc Microsoft Edge. Và nếu bạn muốn gửi cho tôi một MacBook Air, tôi sẽ kiểm tra Apple Safari ;-)
 
Tìm một trang web mà bạn muốn giảm độ rộng của văn bản. Bạn có thể sử dụng ví dụ này .
 
Trên trình duyệt của bạn, nhấn Ctrl+ Shift+ I.
 
Thao tác này sẽ mở công cụ Nhà phát triển của trình duyệt của bạn . Bảng điều khiển có thể mở ra bên cạnh hoặc bên dưới trang web. Đừng lo lắng về các chi tiết như tôi sẽ hướng dẫn bạn qua quá trình này.
 
Trang web và Công cụ dành cho nhà phát triển của Google
 
Trang web và Công cụ dành cho nhà phát triển của Google
 
Trên bảng Công cụ dành cho nhà phát triển, nhấp vào tab Yếu tố về phía trên cùng bên trái. Xem (B) ở trên.

 

Nhấp vào nút Kiểm tra phần tử . Nó sẽ là nút đầu tiên. Hoặc, bạn có thể nhấn Ctrl+ Shift+ C.

Nhấp vào Trình kiểm tra yếu tố

Nhấp vào Trình kiểm tra yếu tố
 
Sử dụng chuột và di chuột qua trang web của bạn cho đến khi phần bạn muốn thay đổi chuyển sang màu xanh lam. Bạn sẽ thấy tên của phần tử.
 
Khi bạn đã tìm thấy khu vực của mình, hãy nhấp vào đó bằng chuột.
 
Trên ngăn Elements , bạn sẽ thấy một mục được đánh dấu. Trong trường hợp của tôi, đó là “mục nhập nội dung”.
 
Phần tử của bạn sẽ được đánh dấu
 
Phần tử của bạn sẽ được đánh dấu
 
Các tên phần tử này có thể khác nhau từ trang web đến trang web. Phần quan trọng là bạn đã nhắm mục tiêu khu vực của bạn. Và nếu bạn muốn chơi xung quanh, bạn có thể nhấp vào tên hiển thị trên truy cập ngang (ví dụ: # post-6526, #content, v.v.) để xem khu vực này thay đổi như thế nào.
 
Làm cho văn bản quá rộng hẹp hơn
 
Phần cuối cùng là thêm một chút CSS.
 
Trong phần dưới của công cụ Nhà phát triển, hãy đảm bảo bạn đang ở trên tab Kiểu .

 

 

Tab Styles và elememt đang hoạt động
 
Nhấp chuột phải sau element.style {
Một dòng mới sẽ xuất hiện bên dưới với dấu hai chấm nhấp nháy và dấu chấm phẩy.
 
Trên dòng mới này, nhập Width và nhấn Tabphím của bạn . Nhập 55% .
Như bạn có thể đoán, văn bản này thay đổi chiều rộng của phần tử. Tôi đã chọn 55% cho bản trình diễn này, nhưng bạn có thể sử dụng các giá trị khác.
 
Nhấn Enter.
 
Thay đổi chiều rộng thành phần thành 55%
 
Thay đổi chiều rộng thành phần thành 55%
 
Bạn sẽ thấy văn bản hẹp. Tuy nhiên, hãy tập trung vào nội dung.
 
Trên dòng tiếp theo, gõ margin và nhấn Tab. Nhập 0 tự động .
 
Nhấn Enter.
 
dòng css cho lề và chiều rộng
 
2 dòng CSS để điều chỉnh chiều rộng và vị trí của văn bản
 
Nhấp vào x ở đầu Công cụ dành cho nhà phát triển để đóng các công cụ và xem toàn bộ trang của bạn.
 
Lần đầu tiên bạn thực hiện các bước này, bạn sẽ mất nhiều thời gian hơn việc thay đổi kích thước trình duyệt. Nhưng theo thời gian, bạn sẽ nhanh hơn. Bạn cũng sẽ bắt đầu thấy các trang web được xây dựng như thế nào và các yếu tố khác mà bạn có thể thay đổi. Tin tốt là bạn không thể phá vỡ trang web. Tất cả bạn phải làm là nhấn nút refresh của bạn và bạn trở lại để thấy rằng văn bản quá rộng.

 

Mời bạn xem thêm: gửi các tệp lớn miễn phí  &&  các ký tự đặc biệt tiền tệ


Tags:
Bình luận

Bình luận

Các bài viết mới

Các tin cũ hơn