如何实现首字垂直旋转且文本环绕的排版效果？

你可以通过CSS的writing-mode结合float属性实现这种效果，无需使用transform旋转，能避免模糊和环绕失效的问题：

代码示例 #

HTML结构 #

<p class="text-block">
  <span class="vertical-first-char">首</span>
  这里是需要环绕的正文内容，你可以替换成自己的文本。当首字设置为垂直排列并浮动后，正文会自动环绕在它的右侧，完全符合图中的效果。
</p>

CSS样式 #

.vertical-first-char {
  /* 设置浮动让正文环绕 */
  float: left;
  /* 垂直从右到左排列，匹配图中首字方向 */
  writing-mode: vertical-rl;
  /* 调整首字大小，根据需求修改 */
  font-size: 2.8em;
  /* 控制行高，避免首字上下间距过大 */
  line-height: 1;
  /* 调整首字与正文的间距 */
  margin-right: 6px;
  margin-top: 3px;
}

.text-block {
  /* 统一正文行高，提升可读性 */
  line-height: 1.6;
}

为什么之前的方法失效？ #

• 用transform: rotate(-90deg)时，元素的占位空间还是水平状态，正文无法正确环绕；同时旋转可能触发浏览器硬件加速，若未优化会导致文本模糊。
• 把首字单独放在<p>标签中，<p>是块级元素默认独占一行，自然无法让其他文本环绕，即使添加旋转也解决不了块级元素的布局问题。

额外调整 #

如果需要首字从左到右垂直排列，可以把writing-mode改成vertical-lr；字体大小、间距数值可根据你的排版需求自由调整。

内容的提问来源于stack exchange，提问作者Andrejicc