文本对齐对齐不起作用

Answer 1

您可以使用此处描述的解决方案： http://blog.vjeux.com/2011/css/css-one-line-justify.html

这将对齐单行，但会在后面添加一个空格，因此如果您知道高度，则可以使用

overflow:hidden

指定它以隐藏它并仍然获得对齐方式。

.fulljustify {
    	text-align:justify;
    }
    .fulljustify:after {
        content: "";
        display: inline-block;
        width: 100%;	
    }
    #tagline {
        height: 80px;
        overflow: hidden;
        line-height: 80px; /* vert-center */
    }

<p id="tagline" class="fulljustify">Blah blah blah</p>

Answer 2

如果您的文本不超过一行，则对齐不会起任何作用。您的文本必须换行到下一行，然后第一行将被对齐，但第二行则不然。

Answer 3

Chrome 不支持，但在 Firefox 和 IE 中，您可以使用

text-align-last: justify;

。对于跨浏览器解决方案，我们必须使用@onemanarmy 发布的内容;)

Answer 4

如果您想证明

487px

中的四个单词合理，您可以尝试在

word-spacing

中使用

css

。

我使用

word-spacing:8em;

代替

bla bla bla bla

，但您可以根据需要进行调整。

http://jsfiddle.net/5RpQr/1/

Answer 5

试试这个

对于div

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}

Answer 6

还有类似的东西，比如display: flex; justify-content：空间周围；如果您将这些文本包装在 span 或 div 中

Answer 7

就我而言，对于 < p > 标签，可以使用简单的方法：

p {
  text-align: justify;
  text-justify: inter-word;
}

https://css-tricks.com/almanac/properties/t/text-justify/

Answer 8

使其在 Chrome 和 Opera 上看起来不错（多行对齐在它们上看起来很糟糕）

我使用以下

.fulljustify {
  text-align: justify;
  display: table-row;
  text-align-last: left;
}

Answer 9

Chrome 解决方案： 如果您不想弄乱显示属性（在我的例子中对齐轮播图像的锚标记）：

text-align: -webkit-center;

Answer 10

这样对我有用：

<div className={s.element}> {text} </div>

.element {
  text-align:justify;
  word-wrap: break-word;
  hyphens: auto;
}

Answer 11

你最好尝试一下

style="text-align:justifty;display:inline-block;"

Answer 12

只需使用

style="text-align:justify"

。
它适用于所有浏览器。