text wrap inside a button
up vote
5
down vote
favorite
I have 4 a-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.
From what I recall white-space: normal is the way to do this, but maybe I am wrong.
@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>html css wrap
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
add a comment |
up vote
5
down vote
favorite
I have 4 a-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.
From what I recall white-space: normal is the way to do this, but maybe I am wrong.
@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>html css wrap
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
3
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possiblyoverflowsetting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?
– Jukka K. Korpela
Oct 11 '13 at 5:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12
add a comment |
up vote
5
down vote
favorite
up vote
5
down vote
favorite
I have 4 a-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.
From what I recall white-space: normal is the way to do this, but maybe I am wrong.
@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>html css wrap
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
I have 4 a-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.
From what I recall white-space: normal is the way to do this, but maybe I am wrong.
@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>@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>@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>html css wrap
html css wrap
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
edited Aug 6 '17 at 15:16
H. Pauwelyn
5,641174483
5,641174483
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
asked Oct 11 '13 at 3:28
Anuj Hari
2031514
2031514
3
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possiblyoverflowsetting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?
– Jukka K. Korpela
Oct 11 '13 at 5:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12
add a comment |
3
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possiblyoverflowsetting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?
– Jukka K. Korpela
Oct 11 '13 at 5:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12
3
3
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possibly
overflow setting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?– Jukka K. Korpela
Oct 11 '13 at 5:45
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possibly
overflow setting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?– Jukka K. Korpela
Oct 11 '13 at 5:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.
@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;
}
}
Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so?
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;
}
}
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
word-wrap: break-wordbreaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.
– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
You can add a space there, or a<wbr>tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.
– Jukka K. Korpela
Oct 11 '13 at 16:10
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.
@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;
}
}
Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so?
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;
}
}
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
word-wrap: break-wordbreaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.
– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
You can add a space there, or a<wbr>tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.
– Jukka K. Korpela
Oct 11 '13 at 16:10
add a comment |
up vote
0
down vote
I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.
@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;
}
}
Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so?
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;
}
}
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
word-wrap: break-wordbreaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.
– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
You can add a space there, or a<wbr>tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.
– Jukka K. Korpela
Oct 11 '13 at 16:10
add a comment |
up vote
0
down vote
up vote
0
down vote
I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.
@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;
}
}
Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so?
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;
}
}
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.
@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;
}
}
Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so?
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;
}
}
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
answered Oct 11 '13 at 3:41
Kevin Pei
4,42262946
4,42262946
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
word-wrap: break-wordbreaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.
– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
You can add a space there, or a<wbr>tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.
– Jukka K. Korpela
Oct 11 '13 at 16:10
add a comment |
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
word-wrap: break-wordbreaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.
– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
You can add a space there, or a<wbr>tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.
– Jukka K. Korpela
Oct 11 '13 at 16:10
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be.
– Anuj Hari
Oct 11 '13 at 3:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it.
– Kevin Pei
Oct 11 '13 at 3:55
2
2
word-wrap: break-word breaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.– Jukka K. Korpela
Oct 11 '13 at 5:49
word-wrap: break-word breaks words, e.g. “Register” to “R” and “egister”. It does not perform hyphenation or break strings at permissible break points only.– Jukka K. Korpela
Oct 11 '13 at 5:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line
– Kevin Pei
Oct 11 '13 at 14:44
3
3
You can add a space there, or a
<wbr> tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.– Jukka K. Korpela
Oct 11 '13 at 16:10
You can add a space there, or a
<wbr> tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be.– Jukka K. Korpela
Oct 11 '13 at 16:10
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f19309803%2ftext-wrap-inside-a-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possibly
overflowsetting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually want the text to wrap, e.g. so that “Register” appears below “Login/” if needed?– Jukka K. Korpela
Oct 11 '13 at 5:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS?
– Hanif
May 13 at 18:12