Question

是否有一种直接的方法可以使水平居中的文字有效，即使真正长的单词需要延伸到周围的填充中？

例如，以下内容：

HTML

<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;
   }

蜂鸟中的结果＆＃34;偏离中心：

如果＆＃34;蜂鸟＆＃34;在适当的中心位置，它很适合金盒子。

摆弄它：
https://jsfiddle.net/m6h37q2z/

添加注意事项＃1：
这个问题不是关于如何删除填充或减小字体大小或使框更大...这些都非常容易调整（并将打破设计）。这个问题是关于如何将“蜂鸟”这个词集中在一起。

添加注意事项＃2：
对于那些说没有足够空间的人来说，这里有一张照片截图，证明有足够的空间：

Answer 1

我认为没有直截了当的做法，但肯定有办法。

您可以使用flexbox并使用一些<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 padding，而是使父容器40px的宽度更大。因为<section>标记使用display: flex属性justified-content，所以子<p>标记将以父<section>为中心（flex-direction是默认row。

此外，<span>中的每个<p>也是居中对齐的（使用align-items沿横轴对齐 - flex-direction为column。

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

结果如下：

Answer 2

您仅将<p>的宽度限制为75px。但hummingbirds,这个词所需的空间大于75px，这就是为什么它不适合那里。尝试增加<p>

的宽度

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

好吧，如果盒子大小不能改变，那么类型大小不能改变....说实话我不知道一个单词是如何伸出它的容器的，即使它是居中的，留下来符合任何设计，但......

一种可能的解决方案是打破长话......

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

Fiddle

在语法上它可能是不确定的，但在视觉上它会是一致的。

不太优雅的解决方案可能是使用背景图像作为黄色（或1色线性渐变），然后加宽段落，但将75px宽背景定位在（较宽）段落中心。

解决方案3 ....

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

Fiddle update

...或

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 */
  }

Fiddle Update 在这里你只需要在一个范围内包装长词......然后CSS应该自动克服填充。

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

对于“有足够的空间”的论点......好好看看上面......是吗？它确实合适，但是只有1个像素。这是使用我的监视器在我的系统上的我的浏览器*上。不知道它可能会或可能不会在其他显示器上运行。逻辑上它应该与我所看到的相同，但没有测试谁知道。这对我来说是不可接受的。

最好的逻辑解决方案是 RETHINK THE DESIGN ，然后加宽框，使用更短的单词或缩小字体大小。

Answer 4

这是另一种使用否定letter-spacing并使用jQuery检测长词（超过8个字符）并将其包裹在使用否定margin和display: block居中的特殊范围内的方法：

＆＃13;

$('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 + ' ');
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

此外，如果你想要破坏冗长的单词，你可以使用这段代码，这将破坏超过15个字符的单词并恢复inline显示：

＆＃13;

$('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 + ' ');
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 5

在这方面你只有很多选择。您可以更改字体大小或更改宽度。您可以将溢出更改为隐藏或滚动。我猜，这些都不是真正吸引你想要做的事情。您也可以更改填充以进行补偿。

Answer 6

我最终使用简化版的Aziz解决方案（我接受了答案）。

如果你想要一些非常简单的东西（但需要在span标签中手动包装长溢出的单词），这就是解决方案：

<强> HTML

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

<强> CSS

section p {
   width: 75px;
   text-align: center;
   background: gold;
   padding: 20px;
   }
section p span {
   display: block;
   margin: 0px -20px;
   }

效果很好：
https://jsfiddle.net/m6h37q2z/8

纯CSS（无Photoshop）：

使用长字

6 个答案: