0

タグ内にテキストがあり<aside></aside>、今はこのように表示されています

This is the text in <aside>

このように縦長に見せたい

T
h
i
s

i
s

t
h
e

t
e
x
t

私はこのcssを使用しています

コード：

aside {
    background: none repeat scroll 0 0 #475E80;
    height: 690px;
    position: relative;
    width: 20px;
    text-align:bottom;
}

これどうやってするの？

4

3 に答える 3

3

word-wrapプロパティを追加してみてください。CSS は次のようになります。

aside {
    background: none repeat scroll 0 0 #475E80;
    height: 690px;
    position: relative;
    width: 0;
    word-wrap: break-word;
}

例を次に示します: http://jsfiddle.net/CkAFs/1/

を使用することもできますword-break: break-allが、上記のソリューションはブラウザーでのサポートがわずかに優れています。参照先は次のとおりです: http://caniuse.com/#search=word-overflow-wrap (プロパティは のエイリアスであることに注意してくださいword-wrap)。

于 2013-10-28T11:26:33.923 に答える
1

このリンクには多くのトリックがありますhttp://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

この例で重要なのはword-wrap: break-word;

長い単語を分割して次の行に折り返すことができるようにします。ただし、word-wrap: break-word は CSS3 仕様の一部であり、すべてのブラウザーに準拠しているわけではありません。

aside {  
    width: 20px;  
    font-size: 50px;  
    word-wrap: break-word;  
}

jsFiddle here

于 2013-10-28T11:27:28.547 に答える