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.

 

 

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

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.

 

 

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”.

 

 

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.