Html xoay văn bản 90 độ trong bảng
Tại nơi làm việc, tôi có một lưới tính năng (tức là bảng dữ liệu), sắp hết chỗ nằm ngang. Trong khi các biểu tượng biểu thị các tính năng hẹp, tiêu đề cột mô tả các tính năng đó tương đối rộng. Vì vậy, tôi muốn bắt đầu chơi xung quanh với các tiêu đề bảng xoay bằng cách sử dụng CSS Show Chạy bản trình diễn này trong dự án Trình diễn JavaScript của tôi trên GitHub Xem mã này trong dự án Trình diễn JavaScript của tôi trên GitHub Kỹ thuật này không mới - Chris Coyier đã viết về nó cách đây một thập kỷ; Khái niệm ở đây tương đối đơn giản. lấy văn bản của ô Theo mặc định, DOM giữ lại luồng của vị trí ban đầu của phần tử được chuyển đổi. Có nghĩa là, ngay cả khi chúng ta xoay một phần tử để làm cho phần tử đó hẹp hơn về mặt hình ảnh, không gian mà phần tử đó chiếm giữ vẫn tiếp tục khớp với trạng thái không chuyển đổi Nếu chúng ta lấy phần tử đã chuyển đổi ra khỏi luồng DOM (chẳng hạn như bằng cách định vị phần tử đó), thì chúng ta cần chiếm không gian theo cả chiều ngang và chiều dọc một cách giả tạo Điều này có nghĩa là thật khó để đưa ra giải pháp chung cho vấn đề xoay tiêu đề bảng. Thay vào đó, mỗi cách tiếp cận sẽ phải được làm thủ công để phù hợp với lượng nội dung tiêu đề, mức độ xoay nội dung và các yếu tố khác xung quanh bảng Trong bản trình diễn sau đây, mỗi ô Trong cách tiếp cận này, lớp Như bạn có thể thấy, chúng tôi đang đặt trình bao bọc văn bản tiêu đề có chiều cao là Tất cả cùng nhau, đây là mã demo Và khi chúng tôi chạy cái này trong các trình duyệt hiện đại (Chrome, Firefox, Safari, iOS), chúng tôi nhận được kết quả sau Như bạn có thể thấy, phần bên ngoài Trong bản demo của tôi, các tiêu đề chỉ "nổi", bị ngắt kết nối khỏi cấu trúc đường viền của lưới dữ liệu tổng thể. Tuy nhiên, nếu bạn tìm kiếm phương pháp này trên Google, bạn sẽ tìm thấy các bản trình diễn khác sử dụng Một trong những điều tuyệt vời khi có Công cụ dành cho nhà phát triển trong trình duyệt là bạn có thể chỉnh sửa trực tiếp bất kỳ trang web nào. Vì vậy, như một phụ lục cho bài đăng này, tôi nghĩ sẽ rất thú vị khi thử và áp dụng kỹ thuật xoay vòng văn bản tiêu đề đã nói ở trên ngay cho bảng sản xuất mà không phải triển khai bất kỳ mã nào. Sau đây là mẫu lưới dữ liệu "Chia sẻ liên kết" trong một dự án demo mà không có bất kỳ xử lý đặc biệt nào Như bạn có thể thấy, lưới tính năng này về cơ bản được tối đa hóa về mặt sử dụng không gian. Tuy nhiên, có rất nhiều khoảng trắng xung quanh các biểu tượng tính năng. Vì vậy, tôi muốn thử và xoay các tiêu đề cột biểu tượng để giảm mức sử dụng không gian theo chiều ngang Như bạn có thể thấy, bằng cách xoay văn bản tiêu đề phía trên các biểu tượng, chúng tôi đã thu hẹp không gian, thu lại chiều rộng khoảng 150px. Điều này có nghĩa là, tôi có thể thêm một cột bổ sung nếu một tính năng mới được thêm vào. Cần phải thực hiện nhiều chỉnh sửa trực quan hơn; Bạn muốn sử dụng mã từ bài đăng này? Ối Tên E-mail Trang mạng Bình luận MỚI. Một số định dạng đánh dấu cơ bản hiện được hỗ trợ. đậm, nghiêng, trích dẫn khối, danh sách, khối mã có hàng rào. Đọc thêm về cú pháp đánh dấu » 😀 😀 😀 🤪 😜 😛 😛 😜 😳 😳 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ Xem trước Comment Markdown Nghi thức nhận xét. Vui lòng không gửi thư rác. Hãy giữ các ý kiến về chủ đề. Vui lòng không đăng các câu hỏi không liên quan hoặc các đoạn mã lớn. Và trên hết, hãy đối xử tốt với nhau - chúng ta đang cố gắng có một cuộc trò chuyện vui vẻ ở đây Gửi bình luận Để giữ cho trang web này vui vẻ, an toàn và tràn đầy những cảm xúc ngọt ngào, ngọt ngào, nhận xét của bạn đã được gửi để phê duyệt |