如何用文本实现紧凑环绕核心内容的边框并消除背景冗余？

需求是让大字号单词“NO”被尤达大师的语录作为类边框文本环绕，核心内容周围不能有线条边框。

目前尝试的代码实现了近似效果，但存在以下问题：

• 文本边框无法紧凑贴合核心内容尺寸
• 旋转后的左右文本会占用原始空间，导致容器背景色冗余
• 调整元素类型、display属性或边距内边距后，布局仍不符合预期

初始CSS代码 #

#boxContent {
  font-size: 55px;
  font-weight: normal;
}

body {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}

#bodyFormat {
  margin: 100px;
  padding: 10px;
  background-color: salmon;
  width: 250px;
  height: 125px;
}

.boxSides {
  display: inline-block;
  border: solid 2px darkGreen;
  /*height: 100px*/
}

#LeftBorder {
  transform: rotate(-90deg);
  /*margin: 40px 0 0 0;*/
}

#RightBorder {
  transform: rotate(90deg);
  /*margin: -80px 0 0 100px;*/
}

#bottomBorder {
  transform: rotate(180deg);
}

初始HTML代码 #

<div id=bodyFormat>
  <!--Close Box top-->
  <div>DO OR DO NOT</div>

  <!--Close Box left side-->
  <span class="boxSides" id="LeftBorder">BE WITH YOU</span>

  <!--Inside Box-->
  <span id="boxContent">NO</span>

  <!--Close Box right side-->
  <span class="boxSides" id="RightBorder">MAY THE FORCE</span>

  <!--Close Box bottom-->
  <div id="bottomBorder">THERE IS NO TRY</div>
</div>

通过绝对定位放置左右旋转文本，避免占用原始布局空间；使用Flex布局让上下文本与核心内容对齐，同时调整容器尺寸贴合核心内容，解决背景冗余问题。

优化后的CSS代码 #

body {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 100px;
}

#bodyFormat {
  background-color: salmon;
  padding: 15px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* 基于核心内容自动调整尺寸 */
  width: fit-content;
}

#boxContent {
  font-size: 55px;
  font-weight: normal;
  margin: 10px 0;
}

/* 左右侧边文本：绝对定位 + 旋转 */
.side-text {
  position: absolute;
  white-space: nowrap;
}

#LeftBorder {
  left: -35px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

#RightBorder {
  right: -35px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

/* 上下文本：保持居中对齐 */
.top-text, .bottom-text {
  margin: 0;
}

.bottom-text {
  transform: rotate(180deg);
}

优化后的HTML代码 #

<div id="bodyFormat">
  <div class="top-text">DO OR DO NOT</div>
  
  <span class="side-text" id="LeftBorder">BE WITH YOU</span>
  <span id="boxContent">NO</span>
  <span class="side-text" id="RightBorder">MAY THE FORCE</span>
  
  <div class="bottom-text">THERE IS NO TRY</div>
</div>

关键优化点说明 #

• 容器设置position: relative作为定位上下文，左右文本用position: absolute脱离文档流，彻底解决旋转元素占用原始空间导致的背景冗余问题
• 通过transform: translateY(-50%)让旋转后的左右文本垂直居中对齐核心内容，保证布局对称
• 容器使用width: fit-content自动贴合核心内容尺寸，实现文本边框紧凑环绕的效果
• 用Flex布局的flex-direction: column和align-items: center，确保上下文本与核心内容始终居中对齐

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