style: --

src/App.scss

@@ -27,6 +27,11 @@
     overflow: hidden;
     white-space: nowrap;
     writing-mode: vertical-lr;
+    text-orientation: upright;
+
+    span {
+      text-orientation: initial;
+    }
   }
 }
 

src/App.tsx

@@ -142,7 +142,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -263,7 +265,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -401,7 +405,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -539,7 +545,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -677,7 +685,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -832,7 +842,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -970,7 +982,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>
 
@@ -1091,7 +1105,9 @@ function App() {
               onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
             >
               <div className="hotspot-item">
-                <p style={{ letterSpacing: 1 }}>留香苑传统中式合院别墅(B2)</p>
+                <p style={{ letterSpacing: 2, fontSize: 16 }}>
+                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
+                </p>
               </div>
             </HotSpot>