以长词为中心的CSS文本

Question

有没有一种直截了当的方法，使文本水平中心工作，即使是真正长的文字需要伸展到周围的填充？

例如，以下内容：

<section>
   <p>
      Some animals in the wild, like
      hummingbirds, have long names.
   </p>
</section>

CSS

section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   }

结果“蜂鸟”偏离了中心：

​

​

如果“蜂鸟”这个词是正确居中的，它就能很好地装在金盒子里。

摆弄它：

https://jsfiddle.net/m6h37q2z/

添加注1：

这个问题不是关于如何删除填充或缩小字体大小或使盒子更大.这些都是非常简单的调整(并且会破坏设计)。这个问题是关于“蜂鸟”这个词的中心。

添加注2：

对于那些说没有足够空间的人，这里有一张照片截图证明有足够的空间：

​

​

Answer 1

下面是另一种使用负letter-spacing并使用jQuery检测长单词(超过8个字符)的方法，并将它们包装在一个特殊的范围内，即使用负margin和display: block来居中。

​

$('section p').each(function() {
  var p = $(this);
  var text = p.text();
  var words = text.split(' ');
  p.empty();
  $.each(words, function(i, w) {
    if (this.length > 8) {
      p.append("<span>" + this + "</span>");
    } else {
      p.append(w + ' ');
    }
  });
});

body { font-family: sans-serif; }

section p {
  width: 75px;
  text-align: center;
  background: gold;
  padding: 20px;
  letter-spacing: -0.4px;
  float: left;
  margin-right: 40px;
}

section p span {
  display: block;
  margin:0 -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Some animals in the wild, like hummingbirds, have long names.</p>
  <p>Some animals in the wild, like oxen, have short names.</p>
  <p>Some animals in the wild, like varylawngstrung, have short names.</p>
  <p>Hellooooo my nameee isssssss whaaaaaaaaaaaaaaat</p>
</section>

​

https://jsfiddle.net/azizn/bf52mwgr/

此外，如果您想要打破长得可笑的单词，您可以使用以下代码，这将打破超过15个字符的单词，并恢复inline显示：

​

$('section p').each(function() {
  var p = $(this);
  var text = p.text();
  var words = text.split(' ');
  p.empty();
  $.each(words, function(i, w) {
    if (this.length > 8 && this.length < 16) {
      p.append("<span>" + w + " </span>");
    } else if (this.length > 15) {
      p.append("<span class='break'>" + w + " </span>");
    } else {
      p.append(w + ' ');
    }
  });
});

body { font-family: sans-serif; }

section p {
  width: 75px;
  text-align: center;
  background: gold;
  padding: 20px;
  letter-spacing: -0.4px;
  float: left;
  margin-right: 40px;
}

section p span {
  display: block;
  margin: 0 -200px;
}

section p span.break {
  display: inline;
  margin: 0;
  word-break: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <p>Some animals in the wild, like hummingbirds, have long names.</p>
  <p>Some animals in the wild, like hummingbirdsss, have long names.</p>
  <p>Some insects in the wild, like Parastratiosphecomyia, have huge names.</p>
</section>

​

jsFiddle：https://jsfiddle.net/azizn/8w3w2zh1/

Answer 2

我不认为这样做是直截了当的，但肯定有办法。

您可以通过使用柔性盒并使用一些<span>标记包装文本的某些部分来实现这一点，如下所示：

<section>
  <p>
    <span>Some animals in the wild, like</span>
    <span>hummingbirds,</span>
    <span>have long names.</span>
  </p>
</section>

然后，您可以添加您的样式如下：

body {
  font-family: sans-serif;
}

section {
  width: 115px;
  background: gold;
  display: flex;
  justify-content: center;
}

section p {
  width: 75px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

如你所见，我改变了几件事。我没有添加20px of padding，而是使父容器40px的宽度更大。由于<section>标记使用的是带有justified-content的display: flex属性，因此子<p>标记将集中在父<section>中( flex-direction是默认的row )。

此外，<p>中的每个<p>也是中心对齐的(使用沿交叉轴排列的align-items - flex-direction是column )。

这是小提琴：https://jsfiddle.net/o0nq9pgt/

结果如下：

​

​

Answer 3

嗯，如果盒子大小不能改变，类型大小就不能改变.老实说，我不知道一个词伸出它的容器，即使它的中心，保持与任何设计一致，但.

一种可能的解决办法是打破长句..。

section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   word-break: break-word;
   }

​

​

小提琴

从语法上看，它可以是不确定的，但在视觉上是一致的。

一个不那么优雅的解决方案可能是使用背景图像的黄色(或1色线性梯度)，然后扩大段落，但定位75 in宽的背景中心(更宽)段落。

解决方案3.

将长单词用<span>包装，然后移动跨度.

​

​

小提琴更新

或者..。

section p span { 
  display: inline-block; 
  text-align: center; 
  width: calc(100% + 20px); /* adds back padding area to inline-block */
  margin-left: -20px; /* counteracts paragraph padding offset */
  }

小提琴更新这里，你只需要用一个跨度来包装长单词.然后CSS应该会自动克服填充。

我发现这个视觉上的可怕的，我是一个设计师。

“有足够的空间”的说法..。看上面..。在那里吗?是的，当然，但是只有一个像素。这是在我的浏览器*在我的系统上使用我的显示器。不知道它在其他显示器上如何工作，也可能不会。从逻辑上讲，它应该和我看到的一样，但是没有测试，谁知道呢。我是不能接受的。

最好的、合乎逻辑的解决方案是重新考虑设计，或者扩大方框，使用较短的单词，或者减少字体大小。