纵向显示文字

作者: 每天进步一点点5454 | 来源:发表于2020-11-17 10:33 被阅读0次

纵向显示文字
CSS实现单行多余文字溢出显示省略号|多行文字溢出显示省略号|固
cocos2dx 3.x 公告栏通知栏滚动字幕区域弹幕区
学会这三招，让文字版式随心所欲
自动布局技巧篇-文字纵向扩展父视图跟随纵向扩展
uniapp 纵向滚动公告
纵向Recyclerview嵌套Recyclerview，只显示
CocosCreator中，显示SpriteFrame的一部分
显示文字
iPhone各种机型尺寸、屏幕分辨率

效果

image.png

鼠标悬停

image.png

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./cpcss.css">
</head>
<style>
    .xllfanyibtn {
        margin: 0 auto;
        writing-mode: vertical-lr;
        width: 54px;
        height: 200px;
        background: #FFFFFF;
        border: 1px solid #DDDDDD;
        padding: 13px 17px;
        box-sizing: border-box;
        cursor: pointer;
        color: #000;

    }

    .xllfanyibtn span {
        width: 23px;
        height: 23px;
        display: inline-block;
        background: #4282EB;
        border-radius: 50%;
        color: #fff;
        line-height: 23px;
        text-align: center;
        float: left;
        margin-bottom: 12px;
    }

</style>

<body>
    <div class="xllfanyibtn"><span>译</span>
        <div style="margin-top: 10px;">将本页翻译成中文</div>
    </div>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script>
        $(".xllfanyibtn").hover(function () {
            $(".xllfanyibtn").css("background-color", "#4683EA");
            $(".xllfanyibtn div").css("color", "#fff");
            $(".xllfanyibtn span").css("background-color", "#fff");
            $(".xllfanyibtn span").css("color", "#4683EA");
        }, function () {
            $(".xllfanyibtn").css("background-color", "#fff");
            $(".xllfanyibtn div").css("color", "#000");
            $(".xllfanyibtn span").css("background-color", "#4683EA");
            $(".xllfanyibtn span").css("color", "#fff");
        });
    </script>
</body>

</html>