Word Wrap at character

@vishvodhayAug 15.2011

I have the text which is aligned this way with the word wrap as normal.

How can I align it in the following way (break after “|”) instead of a white space

to post a comment

CSS

7 Comments(s) _↴

@Frank62Aug 15.2011 — #Like this:

[code=html]
 <style>
 .noBreakLines {
 white-space: nowrap;
 }
 </style>
 
 <span class="noBreakLines">Inforce Interest Rates |</span> <span class="noBreakLines">Whole Life Insurance Current Interest Rates |</span>
 [/code]

@aj_nscAug 15.2011 — #Semantics dictate that, since you have a list of links, you should use a list:

<i>
 </i>.linksWrap { text-align: center; }
 .linksWrap ul { text-align: center; display: inline; }
 .linksWrap ul li { display: inline; }

<i>
 </i>&lt;div class="linksWrap"&gt;
 &lt;ul&gt;
 &lt;li&gt;Interest Rates&lt;/li&gt;
 ....
 &lt;li&gt;Retirement Plans Interests Rates&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;

PS For the record, it's painfully obvious you're engaging in black hat SEO tactics that will eventually get you (or your client, or whomever) banned from any respectable search results.

@Frank62Aug 15.2011 — #Semantics dictate that, since you have a list of links, you should use a list[/QUOTE]
I don't think so. Semantics only dictate a logical order of tags. So in stead of . Semantics do not dictate choice of technique. Nevertheless, your code is shorter and easier to compose. Be it that you still need the white-space:nowrap to prevent breaks inside the <li> elements. Check it out for yourself, in a not too wide window:

[code=html]
 <!DOCTYPE html>
 <head>
 <title>Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 li { 
 display: inline;
 white-space: nowrap;
 }
 </style>
 </head>
 <body>
 <ul>
 <li>Interest Rates |</li>
 <li>Variable Universal Life Current Interest Rates |</li>
 <li>Inforce Interest Rates |</li>
 <li>Whole Life Insurance Current Interest Rates |</li>
 <li>Fixed Annuity Current Interest Rates |</li>
 <li>Variable Annuity Current Interest Rates |</li>
 <li>Inforce Interest Rates - Annuities |</li>
 <li>Retirement Plans Interest Rates |</li>
 </ul>
 </body>
 </html>
 [/code]

And why do you say he is engaging in black-hat SEO tactics? Doesn't one need a link to one's site for that? Otherwise, what's the use?

@vishvodhayauthorAug 16.2011 — #yup, thanks. It helped

@aj_nscAug 16.2011 — #I don't think so. Semantics only dictate a logical order of tags. So in stead of . Semantics do not dictate choice of technique.
[/quote]

That is the wrong-est thing that has ever been posted on this forum. The order of tags is valid HTML and is REQUIRED to be coded like according to the spec - semantics is something much less tangible - which tags to use to provide the most appropriate meaning to the content. Please google it and do not post incorrect "facts" - at least not without adding something like "at least that's my understanding of it"[/quote]

And why do you say he is engaging in black-hat SEO tactics? Doesn't one need a link to one's site for that? Otherwise, what's the use?[/QUOTE]

This list of links is riddled with the same key words, and who's to say they're not just linked to more of the OP's sites? This part, is however, was brought up as an aside to the point of the thread so I'll just let it die.

@Frank62Aug 16.2011 — #That is the wrong-est thing that has ever been posted on this forum.[/QUOTE]
Seemingly, your hate is triggered easily. Could you please slow down a bit!? The world 'semantics' originally meant nothing more than 'the meaning of words', which is strongly influenced by how exactly they are written and in which context they are used -- such as the order of the words. In web design, "[s]emantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look)." See Wiki. I did just that, even though your method was leaner. I already admitted that, so your response is appalling.

who's to say they're not just linked to more of the OP's sites? This part, is however, was brought up as an aside to the point of the thread so I'll just let it die. [/QUOTE]

Do you see any links in his post? In stead of letting it die, you should learn to apologize.

@aj_nscAug 16.2011 — #It's fine if you don't want to admit that you're wrong, but the order of tags has nothing to do with semantics - as you pointed out - "the meaning of words". The order of tags is just valid markup.

Using a UL provides semantic value saying that the content that follows is an unordered list of items that have relevance to each other, insofar that they are a list, though the order is not important. If the order was important, you'd use OL - if you were wanted to emphasize a word/phrase, you'd use em (not i or b).

Likewise, using add's no semantic value, which is not necessarily wrong, but it's worthy to note that the markup can be improved upon.

The semantic web (which was a huge movement 5 or so years ago, but it's kind of lost steam in the mainstream) is the entire reason that proposed HTML5 elements exist the way they do - article, time, nav, header, footer, etc all provide semantic meaning to the content they enclose.

Semantic markup is not always the cleanest markup. However, I'd wager that 95% of the time, it is.

In stead of letting it die, you should learn to apologize.
[/quote]

Ditto.

Also in #CSS _↴

Reuse of design width and height property not working for inline elements hiding text and displaying image background

Success!

Help @vishvodhay spread the word by sharing this article on Twitter...

Tweet This

Word Wrap at character

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Word Wrap at character

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴