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

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

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.

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

3 个答案: