html - 垂直对齐伪元素和怪异字符

Question

我正在使用 Ghost Element CSS 以一个未知的 child 为中心，当字符串中有奇怪的字符时，我看到了一些非常奇怪的行为。

当我渲染普通字符串时，我的输出如下所示:

当我有一个带有奇怪字符的字符串时，它看起来像这样:

这是第二个示例中呈现的字符串:

The 2nd St. bridge waterfall is the best part of the show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 Great photo by @agarrini ὄfὄfὄf Thanks for tagging #Igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9

HTML/CSS

.text {
  text-align: center;
  position: absolute;
  padding: 5%;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  overflow: hidden;
}
.text:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin: 0;
}
.message {
  display: inline-block;
}

<img src="http://www.placehold.it/500" />
<div class="text">
  <div class="message">
    <p>The 2nd St. bridge waterfall is the best part of the show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 Great photo by @agarrini ὄfὄfὄf Thanks for tagging #Igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9</p>
  </div>
</div>

这是一个奇怪的问题，我以前从未见过这些字符导致这样的布局问题。

Answer 1

问题

问题不是由字符本身引起的，而是由不间断的长文本字符串引起的。用a替换字符也有同样的问题:

.text {
  height: 200px;
  width: 200px;
  background: #F00;
}
.text:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  background: #F90;
  width: 0;
}
.text p {
  display: inline-block;
}

<div class="text">

  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

解决方案

解决方案是以某种方式(最好在服务器端)断开长字符串。在 CSS 中，您可以使用 word-wrap: break-word 分隔长字符串(或新标准 overflow-wrap — browser support )和合适的宽度:

.text {
  height: 200px;
  width: 200px;
  background: #F00;
}
.text:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  background: #F90;
  width: 0;
}
.text p {
  display: inline-block;
  width: 90%;
  word-wrap: break-word;
}

<div class="text">

  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>