证明 div 的最后一行对齐？

发布于 2024-10-14 09:38:57 字数 172 浏览 10 评论 0原文

我不认为“为什么？”这个问题的答案很重要......但我需要做的是text-align:justifyDIV中的最后一行文本。通常，div 的最后一行（如果没有其他行，则为第一行，这是当前情况）不是两端对齐的，而是左对齐的。我知道这可能根本没有意义，但我绝对需要最后一行来证明其合理性！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃气十足 2024-10-21 09:38:57

这是一个适用于 IE6+ 的跨浏览器方法，

它结合了 text-align-last: justify; IE 和 :after 伪内容方法的变体都支持它。它包括一个修复程序，用于删除一行文本元素后添加的额外空格。

CSS：

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

如果您只有一行文本，请使用此功能来防止上述 CSS 导致出现空行

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

Here's a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

More details:
http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

回复收藏 0 原文

凡间太子 2024-10-21 09:38:57

这是我能想到/找到的最干净的黑客。您的里程可能会有所不同。

我在 IE8、Firefox、Chrome、Opera、Safari 中测试了我的示例。

IE7 没有实现 :after 伪类，因此它在那里不起作用。

如果您需要 IE7 支持，则可以将 " ___" 粘贴到 div 末尾的无关 span 内（使用 JS ？）。

现场演示 (查看代码)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

不幸的是，它似乎使 div 一行比它需要的要高。

This is the cleanest hack I could come up with/find. Your mileage may vary.

I tested my example in IE8, Firefox, Chrome, Opera, Safari.

IE7 does not implement the :after pseudo-class, so it won't work there.

If you need IE7 support, it would probably work to stick the " ___" inside an extraneous span at the end of the div (use JS?).

Live Demo (see code)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

Unfortunately, it seems to make the div a line taller than it needs to be.

回复收藏 0 原文

☆獨立☆ 2024-10-21 09:38:57

这个方法对我有用：

这个技巧被称为“Ben Justification”^*

嗯，这并不完全是用CSS，你需要在行尾添加一些额外的东西。上面标题的标记是...

<h1 id="banner">
    How to justify a single line of text with css<span>  </span>
</h1>

行尾的小添加通过开始新行来触发行的对齐。附加内容 ( ) 被强制换行，因为空间宽度为 1000 像素（字间距），并且 & nbsp; 被视为一个单词。由于字体大小设置为 0px，因此不会显示附加行。

更新，2011 年 1 月 23 日：我刚刚更新了标记，在后面包含一个空格。在跨度内并将跨度的字体大小设置为 1px：这是 IE8 所需要的。感谢 Mamoun Gadir 指出 IE 的问题。

上面标题的 css 是...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}

^* 除非有证据表明该技术以前已发布过，否则我特此将该技术命名为“Ben Justification”，并声明它免费供所有人使用。

Ben Clay，2010 年 1 月。

来源：http://www.evolutioncomputing.co.uk/technical -1001.html

This method worked for me:

This trick is called "Ben Justification" ^*

Well, it's not quite all with css, you need to add a little extra to the end of the line. The markup for the heading above is...

<h1 id="banner">
    How to justify a single line of text with css<span>  </span>
</h1>

The little addition at the end of the line triggers the justification of the line by starting a new line. The additional content (<span> </span>) is forced onto a new line because the space is made 1000px wide (with word-spacing) and is treated like a word. The additional line does not display because the fontsize is set to 0px.

Update, 23-Jan-11: I've just updated the markup to include a space after the within the span and setting the font size to 1px for the span: this is needed for IE8. Thanks to Mamoun Gadir for pointing out IE's problems.

The css for the heading above is...

h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}

h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}

^* Unless evidence demonstrates that this technique has been published before, I hereby name this technique "Ben Justification" and declare it free for all to use.

Ben Clay, Jan 2010.

Source: http://www.evolutioncomputing.co.uk/technical-1001.html

回复收藏 0 原文

Bonjour°[大白 2024-10-21 09:38:57

CSS3 以 text-align-last 的形式为此提供了解决方案，请参阅http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

回复收藏 0 原文

萌无敌 2024-10-21 09:38:57

假设我正在使用“由于某种原因”（有一个很好的理由）只能有一行的 div......并且我想证明它们是合理的。

为什么不使用text-align: justify;？ ~~它确实证明了每一行的合理性。即使只有一行。~~

编辑：我认为您正在寻找这个，正如 scragz 所说。无论如何，这仅适用于 IE 5.5 和 IE 6。

回复收藏 0 原文

油饼 2024-10-21 09:38:57

有一个 ~~CSS3~~ IE 5.5/6（谢谢，CSS3.com< /a>，不是！）名为 text-justify 可以做你想做的事：

text-justify: distribute-all-lines;

~~不确定浏览器支持。~~真是一个骗局。

There is a ~~CSS3~~ IE 5.5/6 (thanks, CSS3.com, NOT!) property called text-justify that can do what you want with:

text-justify: distribute-all-lines;

~~Not sure about browser support.~~ What a ripoff.

回复收藏 0 原文

孤者何惧 2024-10-21 09:38:57

我遇到了一个问题，上面的一些答案有效，但在底部添加了一条可见的新行 - 这是不可接受的，因为该框有背景颜色。我用下面的代码修复了理由：

jQuery：

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML：

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

I had an issue where some of the above answers worked, but added a visible new line at the bottom - which was unacceptable, because the box had a background color. I fixed the justification with the code below:

jQuery:

$(".justify").each(function(index, element) {
    var original_height = $(this).height();
    $(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
    $(this).height(original_height);
});

HTML:

<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

回复收藏 0 原文

厌倦 2024-10-21 09:38:57

当 !DOCTYPE 为 HTML5 时，Kristin 和 Jacqui 的解决方案导致
一个额外的换行符，很难删除。如果它困扰你（像我一样），
这是另一个想法：

<div style="display: flex;">
  Lorem <span style="flex:1;"></span>
  ipsum <span style="flex:1;"></span>
  dolor <span style="flex:1;"></span>
  sit...
</div>

它还有另一个缺点：仅适用于单行文本，并且需要
修改内容如上所示，这并不总是
可行/实用。但在某些情况下，这是
没问题（就像我的情况一样）。它甚至可能有用
控制插入额外空间的位置。
当然，内联样式只是为了简洁。
我只用最近的 FFox/IE 进行了测试。

When the !DOCTYPE is HTML5, Kristin's and Jacqui's solutions cause
an extra newline, which is hard to remove. If it bothers you (like me),
here's yet another idea:

<div style="display: flex;">
  Lorem <span style="flex:1;"></span>
  ipsum <span style="flex:1;"></span>
  dolor <span style="flex:1;"></span>
  sit...
</div>

It has another drawbacks: works for single-line text only, and requires
modification of the content as shown above, which isn't always
feasible/practical. But there are some situations when this is
not problem (like in my case). It can even be useful to have
control over the positions where the extra space will be inserted.
Styles are inline for brevity only, of course.
I tested it with recent FFox/IE only.

回复收藏 0 原文

桃扇骨 2024-10-21 09:38:57

如果结束 div 标签后跟一个换行符，或者如果 div 标签使用等效的底部填充/边距，那么您可以简单地将其替换为不可见的不间断空格结束行，如下所示

<div>This last line is now for all intents and purposes justified                                             </div>

：是最漂亮的解决方案，它可能是最安全的跨浏览器解决方案，因为它不依赖于任何类型的非标准调整。只需确保有足够的“nbsp”字符始终会导致换行，同时与单行允许的最大字符数保持在安全范围内。

至于为什么有人想要这个，好吧，我可以给出我自己的理由，谁可能对此感兴趣；在某些情况下，您想要划分连续的文本块或文本段落，以便在分页符之前插入图像、表格或在我的情况下插入自定义脚注。如果这样做，那么您希望在中断之前的最后一行是合理的，因为文本将在任意中断之后立即恢复。就我而言，脚注的长度是可变的，因此我必须手动输入它们，因此我还需要手动划分文本块并在中断之前手动强制对齐最后一行。我不知道有任何跨浏览器兼容的自动化解决方案，但添加一堆不间断空格至少对我来说是有用的......

If the closing div tag is followed by a line break or if the div tag makes use of an equivalent bottom padding/margin, then you can simply replace this with a concluding invisible line of non-breaking spaces such as this:

<div>This last line is now for all intents and purposes justified                                             </div>

While this may not be the prettiest solution, it's probably the safest cross-browser solution as it doesn't rely on any kind of non-standard tweak. Just make sure that there's enough "nbsp" characters to always cause a line break while keeping within a safe margin from the maximum allowed on a single line.

As for why one would want this, well, I can give my own rationale to whom it may be of interest; there are situations where you want to divide up a continuous text block or text paragraph in order to insert images, tables or as in my case custom footnotes right before a page break. If you do that, then you want the last line right before the break to be justified as the text will resume right after the arbitrary break. In my case, the footnotes are of variable length so I have to enter them manually and therefore I also need to manually divide the text block and manually force alignment of the last line before the break. I'm not aware of any automatized solution that's also cross-browser compatible, but adding a bunch of non-breaking spaces does the job for me at least...

回复收藏 0 原文

~没有更多了~