text-align justify not working

我试图证明在这个p标签内的文字是正确的，所以它完全符合p的宽度。text-align justify not working

<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>

但文字只是不合理！任何想法为什么？

感谢您的任何帮助。

来源

2011-06-03 phil

如果您的文本没有跨越多行，则证明不会执行任何操作。你的文本必须包装到下一行，然后第一行将是合理的，但不是第二行。

来源

2011-06-03 14:30:01 Brett

darn。所以没有css的方式来证明487宽度p中的4个单词？ – phil 2011-06-03 14:31:38

@phil - 不是我所知... – Brett 2011-06-03 14:32:46

是正确的。您还需要在白色背景上更改白色的“颜色”以查看此信息。 http://jsfiddle.net/5RpQr/ – 2011-06-03 14:34:40

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

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

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

来源

2011-06-03 14:38:03

@phil - 只要记住，如果你改变你的话，字间距必须改变太 – Brett 2011-06-03 14:42:53

@Brett完全。 – 2011-06-03 14:43:10

您可以使用下面介绍的解决方案： http://blog.vjeux.com/2011/css/css-one-line-justify.html

这将证明一个单一的线，但后添加一个空格，所以如果你知道的高度，你可以用overflow:hidden指定它隐瞒它仍然得到理由。

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

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

来源

2012-02-07 17:51:30 manafire

谢谢为我工作。 :) – Bibhu 2012-02-16 11:04:27

对于单行，这 – 2014-06-16 19:17:27

这不适用于IE8和FF低版本。你知道一些不使用'：after'伪代码和'content'后执行的方法吗？谢谢 – Miron 2016-05-17 02:24:17

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

来源

2013-01-26 09:06:46

某种解释会有帮助，不是吗？他明显地使用你的风格... – Ron 2013-01-26 09:29:15

@Ron如果你想证明整个段落除最后一行使用上面的技巧，并且如果你想证明最后一行也是使用'。证明：after {content：“”;显示：inline-block;宽度：100％;}'并且不需要定义高度。 – 2013-02-01 16:03:27

不，不起作用。 – Siddharth 2013-03-23 16:07:34

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

来源

2013-12-20 09:51:20 alijsh

截至2016年12月，所有主流浏览器（65％）都支持此功能，并且是最佳解决方案。 – K48 2016-12-07 02:33:55

是的，这是现在最好的（也是最简单的）解决方案。 – 2018-01-20 02:30:22

在Safari中不起作用。这是OS X的默认浏览器，所以我认为它是一个主要的浏览器。 – Gavin 2018-02-08 13:43:55

试试这个

的DIV

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

来源

2016-03-01 11:05:46 venkat

谢谢，你救了我的培根。我喜欢这些CSS样式是如何在没有任何计划的情况下创建的，通过将它推向腹部。 – SpaceDog 2017-09-20 21:49:06

也有类似的东西，比如显示：弯曲; justify-content：space-around;如果你会将这些文本换成跨度或div

来源

2017-08-18 09:35:05 WoodyDRN

text-align justify not working

回答

相关问题