问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

文本垂直排列

头像
刘辉
    29830

    css 文本垂直排列
    writing-mode 可以对文本进行垂直排列
    但是在火狐浏览器上 有bug ，火狐浏览器的应该如何兼容

    前端csscss3程序员firefox
    阅读 2.3k
    1 个回答
    得票最新
    头像
    刘辉
      29830
      ✓ 已被采纳

      解决了

      这是之前的写法，谷歌内核浏览器和预期一样，火狐出现问题，改为后面的样式问题解决，不过不够优雅，有大佬知道更好的写法，还望不吝赐教。

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .body {
        writing-mode: vertical-rl;
    }
        .b {
            writing-mode: horizontal-tb;
        }

</style>

<body>
    <div class="body">
        <span class="a">销售</span>
        <span class="b">|</span>
        <span class="c">李磊</span>
    </div>
</body>

</html>
      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .body {
        display: flex;
        flex-direction: column;
    }

    .a {
        writing-mode: vertical-rl;
    }
    .c {
        writing-mode: vertical-rl;
    }
</style>

<body>
    <div class="body">
        <span class="a">销售</span>
        <span class="b">|</span>
        <span class="c">李磊</span>
    </div>
</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题