2012-02-03 85 views
10

Có thể quấn văn bản xung quanh hình ảnh không phải hình chữ nhật không?Làm cách nào để quấn văn bản xung quanh hình ảnh không phải hình chữ nhật?

Tôi muốn văn bản xung quanh bản đồ của các quốc gia khác nhau để quấn quanh hình dạng của đất nước theo cách mà văn bản luôn giữ cùng khoảng cách với biên giới của đất nước mặc dù đường biên không thẳng.

Điều này có khả thi không?

+0

Tôi rất nghi ngờ điều đó. Hình ảnh bitmap (phần lớn hình ảnh) là hình chữ nhật (cho dù chúng có phần trong suốt hay không). Và CSS và HTML là khá "hộp" theo định hướng. – cHao

+0

Nó có thể trở thành một khả năng thực sự trong tương lai. http://coding.smashingmagazine.com/2011/12/15/six-css-layout-features-to-look-forward-to/#exclusions (cuộn xuống một chút) –

Trả lời

12

Có những thứ như CSSTextWrapper, cho phép bạn xác định khu vực bằng cách kéo điểm, sau đó cung cấp cho bạn mã để triển khai.

Hoặc có các cách khác like this method, trong đó bạn thả nổi div để chặn khu vực của hình dạng.

Vì vậy - câu trả lời là "Có - nó có thể được thực hiện". Nhưng theo như tôi biết thì không có cách nào "dễ" như CSS "text-wrap".

3

Dường như loại hỗ trợ đó đang ở phía chân trời. Như Dave đã nói, có CSSTextWrapper, có lẽ là cách tốt nhất để làm điều đó vào lúc này, nhưng relatively recent W3C working draft vạch ra một phương pháp để sử dụng các hình dạng phức tạp hơn bằng cách sử dụng SVG, và có lẽ hình ảnh raster với phát hiện phác thảo.

Mất bao lâu để nó được triển khai trong các trình duyệt chính, hãy để một mình hoàn thành, là dự đoán của bất kỳ ai.

Hiện tại, nó có thể được thực hiện, với độ khó. Với may mắn, nó sẽ dễ dàng hơn nhiều trong tương lai.

+0

Kể từ tháng 3 năm 2016, loại trừ CSS3 vẫn không có thể sử dụng: http://caniuse.com/#search=css%20shapes%7Coại trừ – Pit

1

Có một plugin jQuery được gọi là Bagon được thiết kế để thực hiện chính xác việc này.

0

Như những người khác đã nói: có, có thể ... nhưng không quá khó.

Khách hàng có xu hướng thích loại này hoặc bọc, cuối cùng tôi đã thực hiện một kịch bản cho nó: http://www.miguel-svq.com/textwrap.html

này có thể sử dụng divs nổi hoặc cắt hình ảnh, như bạn thích.

Các vấn đề liên quan