CSS - 如果最后一个文本不合适，则将其包装到另一行

Question

我在 4 个段落的末尾有一个链接。比如：

Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
http://mylink.com

因此，HTML 中的实际代码如下：

<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this<br />
<a href="http://mylink.com">http://mylink.com</a></p>

我在这里使用<br />，但我不想使用<br />，因为屏幕会捕获实际显示的文本量，有时它可能看起来像这样：

Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't 
fit left-aligned on that line like this
http://mylink.com

因此，在上述情况下，我需要它不要使用 <br /> 标记来分解它，而是应该像这样呈现：

Here is my text, and it's just an example of text to show And I am wanting to wrap
the last bit of text, which happens to be a link, but I need the link to either stay
on the line that is the available width and not break to another line, unless it can't 
fit left-aligned on that line like this http://mylink.com

这可以通过 CSS 实现吗？可能是一些text-align 值，或者为了在不使用<br /> 标记的情况下完成此任务？但是，如果链接可以自然地放在行上，那么它不应该向下移动到下一行。相反，它应该保持在那条线上。

谢谢！

Answer 1

一些浏览器将您的 URL 中的斜杠解释为允许打破 单词 的字符，而其他浏览器则不会。您需要做的就是调整链接的空白属性

http://jsfiddle.net/Msc4S/

a {
    white-space: pre;
}

Answer 2

根据需要使用此 html：

<p>Here is my text, and it's just an example of text to show
And I am wanting to wrap the last bit of text, which happens
to be a link, but I need the link to either stay on the line
that is the available width and not break to another line,
unless it can't fit left-aligned on that line like this
<a href="http://mylink.com">http://mylink.com</a></p>

但是将它添加到 CSS 中。

a {
    display: block;
}

但是，这会使a 在任何地方都出现在新行上，因此您必须使用此 CSS 更多地指定它

p a {
    display: block;
}

这是 jsfiddle 示例 http://jsfiddle.net/vzmtB/（不使用 p a）和 http://jsfiddle.net/vzmtB/1/（使用 p a）。

Answer 3

我认为没有中断的默认自动换行已经这样做了。当某些东西不适合行时它会移动到下一行，但如果它可以适合则不会移动到下一行。您需要定义父元素的宽度，其中文本将适合。 check this fiddle.

nothing you need to do in css.