SVG：文本内部的文本（或使用CSS）

Question

我正在寻找在文本中定位文本的方法（参见示例图片）。

基本上，正如您在示例char＆＃39; T＆＃39;里面有文字。最简单的方法是在矩形上实现文本掩码。在我的情况下，这不会起作用，因为内部文本是一系列短语，我需要全部看到它们。

我对任何解决方案持开放态度。目前我正在尝试使用SVG + snapsvg库。我也开放了CSS解决方案。

更新

（在我的情况下，包装文字将是一个单词或句子）

Answer 1

您可以使用text-align:justify，并且会是这样的：

div {
  text-align: justify;
  border:1px dashed red;
  margin:auto
}
.w600 {
  width: 600px;

}
.w200 {
  width: 200px;
}

<div class="w600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat turpis ut lectus semper sollicitudin. Nullam turpis metus, eleifend ut mattis nec, vehicula a justo. In ac rhoncus urna. Praesent sodales et felis non pretium. Vestibulum eros augue,
  venenatis in cursus at, tincidunt ac sapien. Nullam quis purus luctus ex ullamcorper fringilla vel a odio. Phasellus ligula enim, placerat id tortor nec, maximus maximus tortor. Maecenas accumsan placerat elementum. Maecenas accumsan</div>
<div class="w200">Phasellus vel velit vel mauris facilisis sagittis id eget elit. Nulla sit amet ornare arcu, sed aliquam sem. Sed molestie tempor nibh et pretium. Cras non dui gravida, tincidunt arcu condimentum, dictum dui. Proin iaculis diam lacus, at consequat erat
  lobortis ornare. Donec in ante sed nibh tempus commodo. Vivamus id justo vitae lacus varius imperdiet. Proin porttitor velit enim, ut molestie sem fermentum ut. Integer vitae est non diam dictum sodales. Mauris lobortis lectus a ligula fringilla, semper
  ullamcorper lacus condimentum. Fusce nisl lectus, pharetra sed augue pulvinar, volutpat mollis justo. Phasellus a iaculis turpis, ut placerat magna. Integer et mollis metus, a lacinia arcu. Sed at erat eget lacus dapibus malesuada id eu tortor. Nullam
  et ullamcorper ante, eu venenatis eros. Pellentesque tempor quis risus dignissim vulputate. Nulla facilisi. Aliquam dapibus pharetra risus in consectetur. Sed pretium mollis imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
  per inceptos himenaeos. Fusce eu felis diam. Donec sit amet quam eget lorem posuere porta. Integer porttitor condimentum neque ut volutpat. Nam iaculis feugiat libero et convallis. Nullam sed orci ac ante pellentesque pretium. Donec tincidunt massa
  quis est fringilla, nec porttitor purus varius. Duis id consectetur nunc. Curabitur interdum feugiat lorem a sollicitudin. Duis tempus orci scelerisque elit facilisis tempus. Nulla nec maximus eros.</div>

Answer 2

使用纯CSS可以找到最正确的方法是使用带有多边形的shape-inside属性或使用透明PNG蒙版的URL作为值。但是，目前shape-outside似乎更受支持，它不会帮助您满足您的特定需求（您可能会使用该方法做负空间字符）。这是因为shape-outside弄乱了整体HTML布局而不是形状内部 - 至少在2014年的铬项目中是这样（https://bugs.chromium.org/p/chromium/issues/detail?id=356778）。查看caniuse.com显示支持shape-in​​side显示一些支持（主要是Chrome，Safari和Opera--有些需要加前缀：http://caniuse.com/#search=shape-inside），但我无法在Chrome和Chromium中使用它在Windows上安装，当前版本，因此很难进行演示 - 它似乎已经在2014年开始工作，因为在那个时间段内有大量的演示。

理论上，您可以使用shape-inside属性，其值为： polygon(40.42% 28.25%,42.33% 99.37%,62.17% 99.37%,61.83% 27.50%,99.10% 26.72%,99.63% 0.69%,99.40% 0.41%,61.92% 0.88%,40.83% 1.13%,1.04% 1.47%,1.25% 28.32%); /*a t-shape letter mask-- defined in percentage values*/并将其应用于块级元素选择器。如果您更喜欢使用固定单位，则上面的T形可以是polygon(161.67px 113.00px,169.33px 397.47px,248.67px 397.47px,247.33px 110.00px,396.42px 106.88px,398.50px 2.76px,397.58px 1.65px,247.67px 3.53px,163.33px 4.53px,4.17px 5.90px,5.00px 113.26px)

除非使用工具绘制多边形，例如：http://betravis.github.io/shape-tools/polygon-drawing/，并且使用字母的内部区域（如A和B等字母中的负空格），否则使用各种字母形状将非常繁琐。需要同时使用另一个shape-inside或shape-outside。如果你想要懒惰，你可以忽略字母中的内部空白，它可能仍然可读。您最少需要52（26 * 2）个班级才能支持大写和小写字母而没有任何标点符号。我可能会根据我的时间限制更新这个答案，以便后面的所有多边形形状。