顯示一些文本在

Question

我使用HTML5和要顯示在垂直格式的字符串垂直順序： 例如：可以顯示WELCOME爲：

W¯¯

Ë

大號

ç

ö

M

E

是否有可能實現？如果是的話，我該怎麼做？ 注意：在這個例子中，有兩個換行符。請避免一個換行符。

Answer 1

您可以使用旋轉文本。但是，對於你的情況，這可能是更好的：http://www.youtube.com/watch?v=DcqmT8D_kzA#t=235

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -o-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 

    /* Should be unset in IE9+ I think. */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

例：http://jsfiddle.net/cbDEK/

Answer 2

您可以使用word-break一些小寬度：

p{ 
    width:10px; 
    word-break: break-all; 
} 

JSFiddle

Answer 3

如果你這樣做不想旋轉的文字，你也可以用一個大的讓ter-spacing像這樣：

.text{ 
    letter-spacing: 999em; 
    word-break: break-all; 
}