39

我试图证明这个 p 标签中的文本是正确的，以便它完全适合 p 的宽度。

<p align="justify" style="text-align: justify !important; color:#fff; margin:0px; font-weight:bold; width:487px; border:Solid 1px red;">blah blah blah</p>

但文字只是不能证明！知道为什么吗？

谢谢你的帮助。

4

10 回答 10

41

您可以使用此处描述的解决方案：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>

于 2012-02-07T17:51:30.093 回答
38

如果您的文本不超过一行，则对齐不会做任何事情。您的文本必须换行到下一行，然后第一行将是合理的，但不是第二行。

于 2011-06-03T14:30:01.873 回答
12

Chrome 不支持，但在 Firefox 和 IE 中，您可以使用text-align-last: justify;. 对于跨浏览器解决方案，我们必须使用@onemanarmy 发布的内容；）

于 2013-12-20T09:51:20.940 回答
8

如果你想证明四个单词 in487px你可以尝试word-spacing在你的css.

我用过word-spacing:8em;，bla bla bla bla但您可以根据需要进行调整。

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

于 2011-06-03T14:38:03.063 回答
6

尝试这个

对于 div

div {
text-align:justify;
text-justify: inter-word;
text-align-last:center;
/* for IE9 */
-ms-text-align-last:center;
}
于 2016-03-01T11:05:46.317 回答
0

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

于 2017-08-18T09:35:05.750 回答
0

在我的情况下 < p > 标签，使用简单的方法：

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

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

于 2018-12-27T08:36:54.753 回答
0

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

我使用以下

.fulljustify {
  text-align: justify;
  display: table-row;
  text-align-last: left;
}
于 2020-05-05T21:46:31.193 回答
-4

你最好试试

style="text-align:justifty;display:inline-block;"
于 2018-05-14T13:00:40.553 回答
-5

只需使用style="text-align:justify".
它适用于所有浏览器。

于 2013-01-26T09:06:46.020 回答