如果內容流出第一行，將<a>標記移動到新行？

我試圖實現以下內容，如果標籤的內容從一行移動到另一行，請將標記移動到新行，以便您可以看到我的意思http://jsfiddle.net/sNyzX/杉杉示例（紅色）顯示我現在具有的情況和第二個示例橙色）顯示所需的效果，但沒有<br>標籤。這可以用純html和css來實現，如果不是jQuery解決方案也可以。如果內容流出第一行，將<a>標記移動到新行？

<div id="example1"> 
    Hi there This is some text and <a href="#"> this is the link! </a> 
</div> 

<div id="example2"> 
    Hi there This is some text and <br> <a href="#"> this is the link! </a> 
</div>

CSS：

#example1 { 
    background: red; 
    width: 145px; 
} 

#example2 { 
    background: orange; 
    width: 145px; 
    margin-top: 20px; 
}

來源

2013-05-18 Ilja

的jsfiddle是下來嗎。你將不得不在這裏發佈小提琴中的代碼。 – BoltClock

@BoltClock對不起，沒想到這對於這裏的人來說會有什麼重要用處，因爲它主要是演示，顯示了我的意思。感謝您按順序添加代碼;） – Ilja

@Ilya：如果它對這裏的人沒有用處，那麼您的問題就有可能因爲本地化而關閉。我不是那種按順序添加代碼的人 - 我現在甚至無法加載jsFiddle。 – BoltClock

地址：

a { 
    white-space: pre; 
}

來源

2013-05-18 13:54:59 bookcasey

有了這個解決方案，''鏈接將會使內容div溢出，使得外觀變得奇怪。 http://jsfiddle.net/sNyzX/3/ – Christian

@Christian我看到了，但是這個問題沒有出現在我的網站上，按預期工作。 – Ilja

我認爲你應該使用

word-break:break-word;

長字闖入線。

#example1 { 
    background: red; 
    width: 145px; 
    word-break:break-word; 
}

JS Fiddle Demo

來源

2013-05-18 13:55:53 Sachin

是的，你可以！

只要把

#example1 a { 
    display: block 
}

jsFiddle here

來源

2013-05-18 13:57:30 Christian

添加到您的樣式表

#example1 a { 
    white-space: nowrap; 
}

來源

2013-05-18 14:02:37 anomaaly

環節只需設置顯示屬性來阻止，它將始終是鏈接移動到一個新的線。

#example1 a { 
    display: block; 
}

你可以看看這個頁面知道如何顯示屬性的工作： http://www.tutorialrepublic.com/css-tutorial/css-display.php

來源

2013-05-20 05:35:28 Alex

如果內容流出第一行，將<a>標記移動到新行？

回答

相關問題