文本对齐证明不起作用

Posted 2023-03-05

【中文标题】文本对齐证明不起作用

【英文标题】：text-align justify not working

【发布时间】：2011-09-07 20:56:18

【问题描述】：

我试图证明这个 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>

但文字无法证明！知道为什么吗？

感谢您的帮助。

【参考方案1】：

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

【讨论】：

该死。所以没有 css 方法来证明 487 宽度 p 中的 4 个单词？

是正确的。您还需要将color 从白色背景上的白色更改为查看此内容。 jsfiddle.net/5RpQr

@jason gennaro - 是的，我花了一分钟试图弄清楚为什么我在小提琴中没有看到任何东西......哈哈

.haha @phil，请参阅我的答案，以获取其他可能的解决方案来证明四个词的合理性

哇，这真是令人困惑，例如在 ckeditor 中将第一行设置为 justify 时，您不会看到任何更改。我浪费了一个小时弄清楚这一点，以为插件坏了。哈！

【参考方案2】：

如果您想证明 487px 中的四个单词的合理性，您可以尝试在您的 css 中使用 word-spacing。

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

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

【讨论】：

@phil - 请记住，如果您更改单词，单词间距也必须更改

【参考方案3】：

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

【讨论】：

单行，这个

这在 IE8 和 FF 较低版本中不起作用。你知道不使用:after 伪代码和content 的实现方法吗？谢谢

【参考方案4】：

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

【讨论】：

某种解释会有所帮助，不是吗？他显然使用了你的风格......

@Ron 如果你想证明除最后一行之外的整个段落使用上述技巧，如果你想证明最后一行也可以使用` .justify:aftercontent: "";显示：内联块； width: 100%;` 不需要定义高度。

他已经使用了text-align: justify的内联css，请重新考虑给出op解决方案。

【参考方案5】：

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

【讨论】：

截至 2016 年 12 月，现在所有主流浏览器 (65%) 都支持此功能，是最佳解决方案。

是的，这是现在最好（也是最简单）的解决方案。在 chrome 中效果很好。

在 Safari 中不起作用。它是 OS X 上的默认浏览器，所以我认为它是主流浏览器。

这是我一直在寻找的解决方案。也适用于铬。非常感谢

【参考方案6】：

试试这个

对于 div

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

【讨论】：

谢谢，你救了我的培根。我喜欢这些 CSS 样式是如何在没有任何计划的情况下创建的，通过腹部推动它。

【参考方案7】：

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

【参考方案8】：

你最好试试

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

【参考方案9】：

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

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

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

【参考方案10】：

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

我使用以下

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