DIV 角落周围的 HTML/CSS 文本

Question

所以，我正在寻找一个 H1 标记来绕过容器。如果我使用 CSS 旋转，我可以旋转文本，但显然只能旋转 90 度，而不是围绕 div。我希望将文本保留在 ONE H1 标记中，因为设计师希望这成为页面的标题并用于 SEO 目的。

根据我所做的所有研究，我不确定这是否可行。我有点难过。我想你们会知道这是否可能。

举例：

<h1>Latest News</h1>
<div>Blue Square</div>

Answer 1

• 将您的框放置在relative（为偏移标题文本留出一些margin空间）
• 将您的标题定位在absolute 与负顶部-1.1em
• 为旋转的垂直文本创建一个<span>（在标题内）
• 将 SPAN 绝对定位在右侧 100% + 1.1em
• transform 旋转你的 SPAN 在原点 right top by -90deg

/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{min-height:100%;font:14px/1.4 sans-serif;}

.box {
  position: relative;
  margin: 3em;
  width: 140px;
  height: 100px;
  background: #0bf;
}
.box h1 {
  position: absolute;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 2em; /* play only with this value. don't touch the rest! */
  top: -1.1em;
}
.box h1 span{
  position: absolute;
  top: 0.35em;
  right: calc(100% + 1.1em);
  transform-origin: right top;
  transform: rotate(-90deg);
}

<div class="box">
  <h1><span>Latest</span> News</h1>
</div>

<div class="box">
  <h1><span>Special</span> Offers!</h1>
</div>

<div class="box">
  <h1><span>Edge case with</span> some long text</h1>
</div>

自动包装成<span>（服务器端）

如果您要提取 未知长度的标题，即从 CMS 中提取，我建议您将字符串分成两半 - word-aware！为了确定需要包裹在span

中的前半词/s

使用 PHP 的示例：

<?php

/**
 * Wrap first half of a sentence into <span>, word-aware! 
 */

function span_first_half($s) {
  $n = floor(strlen($s)/2);
  preg_match(("/.{{$n}}\\S*/"), $s, $a);
  $b = substr($s, strlen($a[0]));
  return "<span>$a[0]</span>$b";
}

PHP - 像这样使用：

<h1><?= span_first_half("Edge case with some long text") ?></h1>
<h1><?= span_first_half("This is cool!") ?></h1>

将导致：

<h1><span>Edge case with</span> some long text</h1>
<h1><span>This is</span> cool!</h1>

---

JavaScript - 使用类似

function span_first_half(s) {
  const n = Math.floor(s.length/2),
    a = s.match(RegExp(".{"+n+"}\\S*"))[0],
    b = s.substr(a.length);
  return `<span>${a}</span>${b}`;
}

console.log( span_first_half("Edge case with some long text") );
console.log( span_first_half("This is cool!") );

_{以上demo改编自this JavaScript example}

Answer 2

您正在寻找的是svg 元素。这是一个完全不同的编码世界，但可以作为 HTML 工作。我建议遵循一些关于 svg 的文档。 CSS 不适用于这些类型的操作。

我已经创建了一个例子：svg fiddle

HTML

<svg width="500" height="500">
  <path id="curve" d="M25,25   l125,0  0,125  -125,0  0,-125"
      style="stroke: #0D454A; fill: #0D454A;" />
  <text width="500px">
    <textPath alignment-baseline="top" xlink:href="#curve">
      This is a text example that's floating around this square
    </textPath>
  </text>
</svg>

要跟随矩形周围的文字，您需要使用<path> 和<textPath>。

Answer 3

我认为这种方式可以帮助你

<div>
<h1>Latest News</h1>
Blue Square
</div>

但是你上传的图片没有加载，请重试上传，并回复我，我帮你

Answer 4

可以通过简单的 CSS 转换来完成：

<style>
    * { margin: 0; padding: 0; }
    div.square { margin-left: 8em; width: 20em;
                 height: 20em; background-color: #08F; }
    h1 { margin-left: 2em; transform: translate(-3em);
         font-size: 400%;}
    h1 div { display: inline-block;
           transform: translate(1em,1em) rotate(-90deg); }
</style>
...
<h1><div>HEAD</div>ONE</h1>
<div class="square">Square</div>

搜索引擎会将 h1 视为“HEAD ONE”文本。