4

我正在尝试text-align:justify在另一个 div 中平均分配 div 空间。出于某种原因，如果 html 是缩进的，它会起作用，但不是其他的。不幸的是，我正在处理的应用程序经常使所有 html 在一个大字符串中一起运行，所以我需要弄清楚如何。

这是一个有两个问题的代码笔的链接：http: //www.codepen.io/evanhobbs/pen/LDgJc

这是代码：

1- 与数字 2 相同，但具有所有间距/缩进

<div class="equal-justify-wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <span class="equal-justify-stretcher"></span>
</div>

2-。与数字 1 相同，但删除了所有间距/缩进

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper {
  list-style: none;
  background-color:red;
  text-align: justify;
   -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.equal-justify-wrapper > div {
     width: auto;
    //height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: #000;
    color: yellow;

}

.equal-justify-stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
4

2 回答 2

4

那是因为当它们之间没有空格时，它们被认为是一个单词。（想象一个长单词，您在其中插入了标签来为某些字母着色。您不希望将单词拆分在那里。）

在第一种情况下，空格（enter/tab）充当单词边界。

您需要在标签之间引入一些空白，text-align: justify;以使父级等属性生效。

于 2013-10-07T22:44:17.630 回答
3

听起来这是正确的行为。请参阅对齐：'text-align' 属性和内联格式上下文：

在 'justify' 的情况下，该属性指定如果可能，通过扩展或收缩内联框的内容，使行内级框与行框的两侧齐平，否则与初始值对齐。

如果 [the text-align] 属性的值为“justify”，则用户代理也可以拉伸内联框中的空格和单词（但不能拉伸内联表和内联块框）。

没有空白，没有理由。

浏览器可以使用字母间距来证明第二个示例中的单个单词。不过，这仍然会导致两种情况下显示的文本不同。

问题出在您使用的框架上，因为它过于急切地删除了空格。要解决这个问题，您应该找到一种保留空格的方法。您可以尝试使用空格字符的 unicode html 实体：&#32;

于 2013-10-07T22:46:45.587 回答