0

我在 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 />标签的情况下完成这一点而做的其他事情？但是，如果链接可以自然地放在行上，那么它不应该向下移动到下一行。相反，它应该保持在那条线上。

谢谢！

4

3 回答 3

3

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

http://jsfiddle.net/Msc4S/

a {
    white-space: pre;
}
于 2013-03-31T18:22:23.573 回答
0

根据需要使用此 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/（不使用 using p a）和http://jsfiddle.net/vzmtB/1/（使用 using p a）。

于 2013-03-31T17:36:34.530 回答
0

我认为默认的无中断自动换行已经做到了。当某些东西不适合行时它会移动到下一行，但如果它可以适合则不会移动到下一行。您需要定义父元素的宽度，其中文本将适合。检查这个小提琴。

nothing you need to do in css.
于 2013-03-31T17:55:34.987 回答