垂直与伪元素和奇怪的字符对齐

Question

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

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

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

这是第二个例子中呈现的字符串：

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替换字符有同样的问题：

＆＃13;

＆＃13;

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

＆＃13;

<div class="text">

  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

＆＃13;

＆＃13;

＆＃13;

解决方案

解决方案是以某种方式打破长字符串（最好是在服务器端）。在CSS中，您可以使用word-wrap: break-word（或新标准overflow-wrap - browser support）和合适的宽度来打破长字符串：

＆＃13;

＆＃13;

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

＆＃13;

<div class="text">

  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div id ='myimage' class='image'>
<div class='text'>
This image was created by me 
 </div>

#myimage
{
 background-image: url("myimage.bmp");
 height:480px;
 width:640px;
 line-height: 480px;
}
.image
{
 text-align: center;
 vertical-align: middle;
}
.text
{
 display: inline-block;
 vertical-align: middle;
 line-height: normal;
 font-size:24px;
 font-weight:bold;
}