Buộc văn bản trên một dòng css
Có thể cắt ngắn các dòng văn bản khá dễ dàng trong CSS, bạn có thể đặt rõ ràng chiều rộng và chiều cao của phần tử chứa và đặt Show Vậy điều này được thực hiện như thế nào, làm cách nào bạn có thể tạo Dấu ba chấm tự động? . gain this is fairly easy for single-lines. Rút ngắn một dòngCác dòng đơn bạn cần đặt giá trị thuộc tính tràn văn bản thành dấu chấm lửng Nếu div gói các phần tử của bạn không có chiều cao rõ ràng, bạn cũng cần thêm
Vâng đó là dễ dàng Rút ngắn nhiều dòngMulti-line không khó hơn nhiều, nó là sự kết hợp của 3 tính chất. Giải pháp là thuộc tính CSS độc quyền sẽ giới hạn văn bản của vùng chứa khối ở một số dòng nhất định khi được sử dụng kết hợp với Mặc dù nó là độc quyền nhưng có 96% hỗ trợ trong các trình duyệt theo Tôi có thể sử dụng không
1 cỡ chữ được đặt thành 0. 85em trong ví dụ này vì các liên kết được gói trong h2. Điều này sẽ được làm lại trong những tuần tới vì chủ đề được thiết kế xung quanh nội dung. Vui lòng xem trang chủ của trang web này trên thiết bị di động hoặc độ rộng hẹp
Hỗ trợ tốt cho cả hai và theo như tôi thấy hữu ích nếu bạn có nội dung đôi khi có thể dài hơn mức trung bình. Đối với trường hợp của trang web này, sẽ tốt hơn nếu làm cho văn bản nhỏ hơn cho tiêu đề bài viết và đây là điều tôi sẽ làm khi thực hiện một số sửa đổi chủ đề trong những tuần tiếp theo Ví dụ đầu tiên là tiêu đề trang trong tiêu đề, nó hoạt động tốt và nó chỉ cắt bớt đối với kích thước thiết bị nhỏ theo chiều rộng. Không muốn dải tiêu đề chiếm nhiều màn hình. Tôi nghĩ nó hoạt động tốt vì nó chỉ chiếm một số ít trang Một suy nghĩ cuối cùng về việc cắt bớt văn bản là bạn chỉ nên làm điều đó cho các trường hợp cạnh vì nếu mọi phần tử cần được cắt bớt thì bạn nên nghĩ đến việc thiết kế lại giao diện người dùng Trong CSS, nếu bạn có một chuỗi không thể ngắt, chẳng hạn như một từ rất dài, theo mặc định, nó sẽ làm tràn bất kỳ vùng chứa nào quá nhỏ đối với nó theo hướng nội tuyến. Chúng ta có thể thấy điều này xảy ra trong ví dụ dưới đây. từ dài đang kéo dài qua ranh giới của hộp nó được chứa trong CSS sẽ hiển thị tràn theo cách này, vì nếu làm khác có thể gây mất dữ liệu. Trong CSS mất dữ liệu có nghĩa là một số nội dung của bạn biến mất. Vì vậy, giá trị ban đầu của Trong ví dụ tiếp theo này, bạn có thể thấy điều gì sẽ xảy ra nếu Tìm kích thước nội dung tối thiểuĐể tìm kích thước tối thiểu của hộp sẽ chứa nội dung của nó mà không bị tràn, hãy đặt thuộc tính 2 hoặc 3 của hộp thành 4Do đó, sử dụng 4 là một khả năng cho các hộp tràn. Nếu có thể cho phép hộp phát triển thành kích thước tối thiểu cần thiết cho nội dung, nhưng không lớn hơn, sử dụng từ khóa này sẽ cung cấp cho bạn kích thước đóPhá vỡ những từ dàiNếu hộp cần có kích thước cố định hoặc bạn muốn đảm bảo rằng các từ dài không thể tràn ra ngoài, thì thuộc tính Ghi chú. Tài sản Một tài sản thay thế để thử là Trong ví dụ tiếp theo này, bạn có thể so sánh sự khác biệt giữa hai thuộc tính trên cùng một chuỗi văn bản Điều này có thể hữu ích nếu bạn muốn ngăn khoảng cách lớn xuất hiện nếu chỉ có đủ khoảng trống cho chuỗi. Hoặc, khi có một yếu tố khác mà bạn không muốn sự gián đoạn xảy ra ngay sau đó Trong ví dụ dưới đây có một hộp kiểm và nhãn. Giả sử, bạn muốn nhãn bị hỏng nếu nó quá dài so với hộp. Tuy nhiên, bạn không muốn nó bị hỏng ngay sau hộp kiểm Thêm dấu gạch ngangĐể thêm dấu gạch nối khi các từ bị hỏng, hãy sử dụng thuộc tính CSS Bạn cũng có thể sử dụng thuộc tính Thuộc tính này cũng nhận giá trị Phần tử overflow2Nếu bạn biết nơi bạn muốn ngắt một chuỗi dài, thì bạn cũng có thể chèn phần tử HTML |