Links that wrap over two lines

HTML & CSS
1

Hi all,

I want to write a list of links like this ie where some links (highlighted in red) wrap over two lines. So if the space of the container allows, “New” would be on the first line and “York” would be on the second line ie rather than both words being pushed to the second line.

On my test page the links are floated left – the first line has room for “New” but it is being pushed down to the second line.

Any ideas please?

Thanks…

2

I believe you just need to remove float:left att for a link.

3

First you should do as peterorl told you. Why float:left? What for?

Second, insert a “br” element in the link. It has no effect in terms of navigation or SEO, is html and xhtml valid and has full browser support.

In the case of the New York link:


<a class="state" href="/">New<br/>York</a>
4

The image you show looks like there is just one containter and that those words in read simply fall where they’re supposed to, and if the term (in this case, the state with two words) is divided, so be it.

I personally wouldn’t worry too much about it. I don’t care if “New” goes in line 1 and “York” in line 2. I care about usability first, then aesthetics. Although it is simply a case of using the right font at the right size and a box with the right dimensions.

Adding a [noparse]<br />[/noparse] could be solution for ensuring this but… is it really justified? In my opinion, no. I even would get read of those [noparse]<br />[/noparse] you already have!

5

In any case, it would be helpful to know why some of the links should be wrapped in two lines. What would be purpose of it in the design?

6

Hi,

I would do it like this using a list because as you said you have a “list of links” :slight_smile:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#link-wrapper {
	width:520px;
	border:2px solid red;
	margin:0;
	padding:10px;
	list-style:none;
}
#link-wrapper li{display:inline}
#link-wrapper a {
	font-size:36px;
	padding-right:12px;
	color:#000;
	text-decoration:none;
}
#link-wrapper a:visited {
	color:#000
}
#link-wrapper li.split a, #link-wrapper li.split a:visited {
	color:red
}
li.split span:after{
	content:" ";
	display:block;	
}
</style>
</head>
<body>
<ul id="link-wrapper">
		<li><a href="/">Mississipi</a></li>
		<li><a href="/">California </a></li>
		<li><a href="/">Idaho</a></li>
		<li class="split"><a href="/"><span>New</span> York</a></li>
		<li><a href="/">Oregon</a></li>
		<li><a href="/">Florida</a></li>
		<li class="split"><a href="/"><span>North</span> Carolina</a></li>
		<li><a href="/">Arizona</a></li>
		<li><a href="/">Alaska</a></li>
		<li class="split"><a href="/"><span>South</span> Carolina</a></li>
		<li><a href="/">New Mexico</a></li>
		<li><a href="/">Montana</a></li>
		<li><a href="/">North Dakota</a></li>
		<li><a href="/">Indiana</a></li>
		<li class="split"><a href="/"><span>West</span> Virginia</a></li>
		<li><a href="/">Wyoming</a></li>
</ul>

<body>
</body>
</html>
7