css 文字竖向改横向排

在 CSS 中，可以通过 transform 属性中的 rotate() 函数来实现文字从竖向改成横向排列。

    /* 将文字顺时针旋转90度，变成横向排列 */    .rotate-text {
            transform: rotate(90deg);
            writing-mode: vertical-rl;
 /* 兼容 IE11 及以下版本浏览器 */    }

上述代码中，通过 rotate() 函数将文字进行顺时针旋转 90 度，实现了文字竖向改成横向排列的效果。同时，使用 writing-mode 属性来设置文本方向为从右往左，避免了在 IE11 及以下版本浏览器中出现的问题。

除了使用 rotate() 函数实现文字旋转外，还可以通过 transform-origin 属性来设置文字旋转中心点的位置，从而实现不同的效果。例如，可以将文字从中心点旋转，也可以将文字从左上角旋转。

    /* 将文字从中心点旋转 */    .rotate-center {
            transform: rotate(90deg);
            transform-origin: center;
    }
    /* 将文字从左上角旋转 */    .rotate-left-top {
            transform: rotate(90deg);
            transform-origin: left top;
    }

除了使用 transform 属性外，还可以通过 writing-mode 属性来实现文字竖向改成横向排列的效果。writing-mode 属性有多种取值，其中包括 vertical-lr（从左向右竖排）、vertical-rl（从右向左竖排）、horizontal-tb（从上向下横排）等，可以根据实际需求选择使用。

    /* 将文字从左向右竖排 */    .vertical-text {
            writing-mode: vertical-lr;
    }
    /* 将文字从右向左竖排 */    .vertical-text-rl {
            writing-mode: vertical-rl;
    }
    /* 将文字从上向下横排 */    .horizontal-text {
            writing-mode: horizontal-tb;
    }
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！