Q

段落中的文字傾斜

2012-10-16 64 views 2 likes

2

我想「包裝」文字，就像在文字周圍包裹文字一樣，但可以在沒有圖像的情況下做到這一點嗎？段落中的文字傾斜

右邊的文字是我想要的結果。 enter image description here

2012-10-16 Patrik

+1

哪些瀏覽器，你定位？這可以使用CSS3轉換。 – BenM

+0

@BenM儘可能多，但主要是：Firefox，WebKit，ie7 + – Patrik

A

回答

0

我設法寫我自己的小腳本。這個想法來自jQSlickWrap，每行都有一個元素。

它在這裏：http://jsfiddle.net/m4jLt/1/ 它不完美，但有一些調整，我認爲它會工作得很好。該小提琴中有三個版本。（只要你知道）

如果你做的更好，請大家分享:)

2012-10-17 08:14:53 Patrik

0

這是可能的，但它不能用良好的標記完成。

看一看http://www.torylawson.com/index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

http://www.csstextwrap.com/ - 是一個在線工具，如果你想有一個「複製和粘貼」的方法，可以幫助。

http://www.jwf.us/projects/jQSlickWrap - 是一個非ie瀏覽器的jquery插件，如果IE支持不是必需的。

2012-10-16 15:51:09 boz

+0

謝謝，但這是不可能做到沒有圖像？就像匹配每一行並添加一個跨度，並在每行添加一些邊距。 – Patrik

+0

你看過我的鏈接嗎？它們中沒有任何圖像參與其中，並且它們使用每行上的元素來推動整個內容。 – boz

+0

是的，我做到了。第一個使用圖像，第二個不是選項，第三個也使用圖像。但是我把這個想法與每一行的元素結合起來，並設法編寫我自己的小腳本。 http://stackoverflow.com/a/12929917/630413 – Patrik

0

在現代瀏覽器中，您可以使用轉換，但也會扭曲內容（字母）。例子：

http://jsfiddle.net/willemvb/LftMA/

2012-10-16 15:53:43

+0

我說錯了。我傾向於傾斜元素而不是側面的文字。就像你將文字包裹在一個物體上 – Patrik

1

您可以使用CSS3轉換。

jsFiddle example

div { 
    position:relative; 
    width:300px; 
    left: 40px; 
    transform: skew(-20deg); 
    -ms-transform: skew(-20deg); /* IE 9 */ 
    -moz-transform: skew(-20deg); /* Firefox */ 
    -webkit-transform: skew(-20deg); /* Safari and Chrome */ 
    -o-transform: skew(-20deg); /* Opera */ 
}

2012-10-16 15:54:14 j08691

+0

我說傾斜是錯誤的。我傾向於傾斜元素而不是側面的文字。就像你將文字包裹在一個物體上 – Patrik

相關問題