文字環繞按鈕

我有4 a -tags。每個CSS作品中的所有內容。它在我的手機上完美調整了按鈕的大小。我唯一的問題是在我的手機上，登錄/註冊按鈕，按鈕內的文字切割以及它顯示的全部內容是登錄/註冊。文字環繞按鈕

從我記得white-space: normal是這樣做的方式，但也許我錯了。

@media only screen and (max-device-width: 480px) { 
 
    .newsButton { 
 
    width: 49%; 
 
    height: 140px; 
 
    white-space: normal; 
 
    float: left; 
 
    } 
 
    
 
    .venueButton { 
 
    width: 49%; 
 
    height: 140px; 
 
    white-space: normal; 
 
    float: right; 
 
    } 
 
    
 
    .learnButton { 
 
    width: 49%; 
 
    height: 140px; 
 
    white-space: normal; 
 
    float: left; 
 
    } 
 
    
 
    .loginButton { 
 
    width: 49%; 
 
    height: 140px; 
 
    white-space: normal; 
 
    float: right; 
 
    } 
 
}

<a href="menu.php" class="newsButton" data-role="button" data-theme="e">News</a> 
 
<a href="venue.php" class="venueButton" data-role="button" data-theme="e">Venue Hire</a> 
 
<a href="learn.php" class="learnButton" data-role="button" data-theme="e">Learn</a> 
 
<a href="login.php" class="loginButton" data-role="button" data-theme="e">Login/Register</a>

來源

2013-10-11 Anuj Hari

不reproduceable。問題文本中描述的行爲取決於代碼中未包含的設置，可能是非常大的字體大小，也可能是「溢出」設置。問題的標題是「按鈕內的文字換行」，但文字換行在問題中根本沒有提及。你真的*想要*文本包裝，例如如果需要，在「登錄/」下方出現「註冊」？ –

我相信你使用word-wrap: break-word;。此外，刪除height限制 - 當單詞換行時，它會引起奇怪的文本溢出問題。

@media only screen and (max-device-width: 480px) { 
.newsButton{ 
    width:49%; 
    word-wrap:break-word; 
    float: left; 
} 

.venueButton{ 
    width:49%; 
    word-wrap:break-word; 
    float: right; 
} 

.learnButton{ 
    width:49%; 
    word-wrap:break-word; 
    float: left; 
} 

.loginButton{ 
    width:49%; 
    word-wrap:break-word; 
    float: right; 
} 
}

此外，你似乎在以一種非常奇怪的方式使用你的課程。難道你不應該將這些課程分配爲id的課程，並且將所有的課程按照類似的方式分配給一個button課程嗎？ HTML

<a href="menu.php" id="newsButton" class="button" data-role="button" data-theme="e">News</a> 
<a href="venue.php" id="venueButton" class="button" data-role="button" data-theme="e">Venue Hire</a> 
<a href="learn.php" id="learnButton" class="button" data-role="button" data-theme="e">Learn</a> 
<a href="login.php" id="loginButton" class="button" data-role="button" data-theme="e">Login/Register</a>

CSS：

@media only screen and (max-device-width: 480px) { 
    .button{ 
     width:49%; 
     word-wrap:break-word; 
     float: left; 
    } 
}

來源

2013-10-11 03:41:30

這沒有奏效。至於高度，我指定在一定的高度，因爲它是我想要的按鈕的大小。 –

我不明白你想如何去文本去。你想在那裏有一個省略號？現在切斷的文字是？你也可以提供一個鏈接，以便我們可以重現問題並解決它。 –

'單詞 - 換行：單詞'打破單詞，例如「註冊」爲「R」和「egister」。它不會*只在允許的中斷點執行連字符或中斷字符串。 –

文字環繞按鈕

回答

相關問題