Sign in to follow this  

[web] css + line breaks

This topic is 3841 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello, I have some dynamic menus..that change.. some of the menus are more than one word long...for example pretend this is a menu item.
a long menu item that cannot break
the problem is ...if it's that long...it will end up line breaking in the middle...like.."a long menu item" will be on one line...and on the next line will be "that cannot break"...is there a way to make it (using html or css ) not break in the middle..and rather, see if there is enough room..if there's not..put the WHOLE phrase on a new line? Thanks, If this doesn't make any sense please say and i'll attemp to exmplain a little better. ArchG

Share this post


Link to post
Share on other sites
a long menu item that cannot break

Resize the browser to see that this is a long menu item that cannot break but none of the other text is.

Share this post


Link to post
Share on other sites
A more semantic way of doing this (you can use unordered lists for example to display your links, but we won't get into that here)


<style type="text/css">
#nav a {display:block;margin:0 5px 0 5px;float:left;}
</style>

<div id="nav">
<a href="link">link 1</a>
<a href="link">link 2</a>
<a href="link">link 3</a>
<a href="link">link 4</a>
</div>




Play around with it, add padding and backgrounds and hover events. CSS can actually be "fun" to learn.

Share this post


Link to post
Share on other sites
Quote:
Original post by markadrake
A more semantic way of doing this (you can use unordered lists for example to display your links, but we won't get into that here)

*** Source Snippet Removed ***


Play around with it, add padding and backgrounds and hover events. CSS can actually be "fun" to learn.



Dynamic CSS is even more fun!


input, select, textarea {
border: 1px solid #aaa;
padding: 2px;
}
input:focus, select:focus, textarea:focus {
background-color: #f6f6f6;
border: 1px solid #444;
}
input[type="text"],
input[type="password"] {
width: 150px;
}
input[type="checkbox"],
input[type="checkbox"]:focus {
border: 0;
}




The 'type' attribute can be any attribute in any HTML tag, even custom ones. What the W3C or any other sites I've seen haven't showed you is that while you can do

input[class|="check"] (| separated values)
or
input[class~="check"] (space separated values)

You can also do

input[class*="check"]

which will match "check" and "checkbox". I was very glad to find this :D

Share this post


Link to post
Share on other sites

This topic is 3841 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this