Question

我在Android上遇到问题时没有为<div>中的文字显示多个空格。如果您在桌面上查看下面的示例，那么文本＆＃34;测试＆＃34;在右边的边缘。如果你在Android设备上查看它，它距离右边缘约20码像素。我使用的是white-space:pre-wrap CSS样式，但由于某种原因，它在Android上呈现错误。

我正在构建一个文本滚动应用，需要尊重最终用户输入的空间。基本上，我需要显示用户输入的内容，多个空格以及所有内容。

Android会以不同方式渲染空白吗？如果是这样，我怎样才能让它在所有平台上保持一致？

＆＃13;

.parentDiv {
  width: 277px;
  height: 50px;
  top:0;
  left:0
  position: absolute;
  background-color: rgb(0, 0, 0);
  word-wrap: break-word;
  line-height: 1.0em;
  overflow: hidden;
  z-index: 1002;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  filter: alpha(opacity=100);
  -moz-opacity: 1.00;
  -khtml-opacity: 1.00;
  opacity: 1.00;
  font-family: Arial, fallback Arial;
  font-size: 14px;
  text-align: start;
  color: rgb(191, 190, 191);
  border: 0px solid;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.textBoxText {
  font-family: inherit;
  font-size: inherit;
  text-decoration: inherit;
}

＆＃13;

<div id="layer-0-0" class="parentDiv">
  <div class="textBoxText">                                                            TEST</div>
</div>

＆＃13;

View on JSFiddle

Android

0 个答案: