css - 垂直文字
css - 垂直文字
<!--
* @createDate: 2022-08-15 13:59:01
* @Author: zclee
* @LastEditTime: 2022-08-15 15:14:57
* @LastEditors: zclee
* @FilePath: \lee-vue-press\cnblog\css - 垂直文字.md
* @Description:
-->
<template>
<div class="app-container">
<h3>兼容ie</h3>
<div class="ul ul1">
<pre>
width: 20px;
line-height: 24px;
font-size: 20px;
</pre>
<div class="one">我是竖列排版</div>
<div class="one lh">我是竖列排版</div>
<pre>
line-height: 35px;
</pre>
<pre>
width: 15px;
line-height: 24px;
font-size: 20px;
word-wrap: break-word; /*英文的时候需要加上这句,自动换行*/
</pre>
<div class="two">I AM ENGLISH</div>
</div>
<h3>多个句子竖向排列(如古诗)兼容ie</h3>
<div class="ul ul2">
<pre>
height: 190px;
letter-spacing: 8px;
writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/
</pre>
<div class="one">欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</div>
<div class="one ls">欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</div>
<pre>
height: 190px;
letter-spacing: 8px;
</pre>
<div class="one">I AM ENGLISH</div>
</div>
<h3>字体横行,整体竖向排版</h3>
<div class="ul ul3">
<pre>
margin: 90px 0;
width: 200px;
font-size: 20px;
line-height: 24px;
transform: rotate(90deg);
</pre>
<div class="one">欲话毗陵君反袂</div>
<div class="one ls">欲话毗陵君反袂</div>
<pre>
letter-spacing: 8px;
</pre>
<div class="one">ENGLISH</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.ul {
display: flex;
&.ul1 {
div {
display: inline-block;
}
.one {
width: 20px;
line-height: 24px;
font-size: 20px;
&.lh {
line-height: 35px;
}
}
.two {
width: 15px;
line-height: 24px;
font-size: 20px;
word-wrap: break-word; /*英文的时候需要加上这句,自动换行*/
}
}
&.ul2 {
.one {
height: 120px;
writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/
&.ls {
height: 190px;
letter-spacing: 8px;
}
}
}
&.ul3 {
.one {
margin: 90px 0;
width: 200px;
font-size: 20px;
line-height: 24px;
transform: rotate(90deg);
&.ls {
letter-spacing: 8px;
}
}
}
}
</style>
Lee2