Solved

keep text together

Posted on 2006-07-08
14
2,721 Views
Last Modified: 2008-01-09
I'm writing the code for a blog style website, and I was wondering if there was anyway to keep text together.

This is only really a problem for things like ". . . ." where there are spaces between the elipses so if the person's screen or browser is spaced a certain way it could end up either like this:

text text . . . text text


or like this:

text text text . .
 . text text

which is a problem

is there any way for me to specify keep this text to together so I could keep the last word before the elipses, the elipses and the first word after together?

so if the end of the line came up if would look like this:

text text text text text text text text text
text text text text text text text text
te . . . text text

not
text text text text text text text text text
text text text text text text text text te .
. . text
0
Comment
Question by:lovewithnoface
14 Comments
 
LVL 143

Accepted Solution

by:
Guy Hengel [angelIII / a3] earned 500 total points
ID: 17066106
you should use   instead of simple space for those...
0
 
LVL 3

Author Comment

by:lovewithnoface
ID: 17066140
that will help?
0
 
LVL 16

Expert Comment

by:OliWarner
ID: 17066141
You specify the absolute width of the element that its in. Then the element cant get any thinner than that and will always be on the same line.
You've just got font size to worry about after that.

If you're still getting issues, you could just use a <pre></pre> construct.... That should preserve all your whitespace in quite a nice way, but it could easily break your layout if you dont know how to use it well.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:lovewithnoface
ID: 17066200
I tried using &nbsp;, which worked perfectly (guess I know nothing about &nbsp;)

course now my lines look a bit ridiculous, because there's tons of blank space at the ends of some of them, which i suppose is the point of newspaper spacing which i now need to figure out how to impose (http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21912703.html)

thanks to everyone who responded so quickly (im in a bit of rush in case no one could tell.)  Ill leave this open a bit longer for any scintillating discussion that may follow
0
 
LVL 3

Expert Comment

by:mdg12
ID: 17066842
You can also use the nobr tag (no break)..   There would have to be some logic to perhaps split the lines on each linebreak and wrap each line in a <nobr>line content</nobr> and then re-combine them

So if the plaintext user input is:
text text text text text text text text text
text text text text text text text text
te . . . text text

You could turn that into:
<nobr>text text text text text text text text text</nobr><br>
<nobr>text text text text text text text text</nobr><br>
<nobr>te . . . text text</nobr>

0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 17067139
You could wrap your lines in pre tags:

<pre>
     text text text . . . text text
</pre>
0
 
LVL 3

Author Comment

by:lovewithnoface
ID: 17067258
its really just to keep elipses together

so it would be text text text&nbsp;.&nbsp;.&nbsp;.&nbsp;text so that wherever the word wrap occured it wouldn't break the elipses up

or, text text <nobr>text . . . . text</nobr> text

or, text text <pre>text . . . . text</pre> text

i'm assuming that is.  since &nbsp; worked, i havn't tried the others yet, though i will for the sake of paq.  i've never used either tag so i dont know anything about them.

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17067390
The white spaces is controlled by the "white-space" css property:
http://www.w3.org/TR/CSS21/text.html#propdef-white-space

<pre> is a block element.  if you use it, then you'll need to use it on your entrie block, which is not what you want.
by default, the <pre> element has "whitespace: pre", but you can set "whitespace: pre" on any other element you want.
also, semantically, using a <pre> is not a good solution.
finally, "whitespace: pre" is not what you want... what you want is "whitespace: nowrap"

<nobr> is more what you need, but it is deprecated in favor of CSS...
You can use a span instead:

HTML:
    Lorem ipsum<span class="ellipsis"> . . . .</span> dolor sit amet, consectetuer adipiscing elit.

CSS:
    span.ellipsis {
        white-space:nowrap;
    }


Make sure you only place your ellipsis inside the html tag, otherwise it makes the html semantically wrong...

>    Lorem ipsum<span class="ellipsis"> . . . .</span> dolor sit amet, consectetuer adipiscing elit.
This won't allow line breaks between "lorem" and your ellipsis, but will allow line breaks between the ellipsis and "dolor".

>    Lorem ipsum<span class="ellipsis"> . . . . </span>dolor sit amet, consectetuer adipiscing elit.
This won't allow line breaks between "lorem" and your ellipsis, and won't allow line breaks between the ellipsis and "dolor".


As angelIII said, the easiest solution is to use &nbsp; but it's less flexible than using CSS.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 17104205
The &nbsp; is the simplest for short uses, but you should try mdq12s <NOBR> tags </NOBR> first ....
The &nbsp; simply means a non-breaking space -- i.e. characters either side cant be broken.  The <nobr> tags just enclose the area not to be broken.  No points to me on this one.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17106019
scrathcyboy, the breaking behaviour is controlled by CSS, not by HTML.
HTML is content, CSS is presentation.  

Using the <nobr> HTML only works if its CSS "white-space" is set to "nowrap".
That's the default value in most browsers, but it can be overridden:

    nobr {
        white-space:normal ;
    }

The <nobr> is not in the standards and therefore won't validate.
Using a span with a semantically correct class name it the right solution.
0
 
LVL 3

Author Comment

by:lovewithnoface
ID: 17317005
I want to thank everyone that provided lots of answers, but in this case, simplest was best and work's wonderfully.  and it may not work for most people (i think i'm one of the few snobs proudly sticking to properly spaced ellipsise and my netspeak), and so for that, this works just perfectly

in case anyonre was wondering, in doing

text text text&nbsp;.&nsbp;.&nsbp;&nsbp; text

for example, so if it gets really really long, the word after the elipsis can go to the next line.   that doesn't look so bad, but starting a line with an elipsis does so this is a perfect happy medium

for elipsise that end sentences (four periods), since i use two spaces after a sentence ending anyway, i just make the end &nbsp.&nbsp;

All right, enough dorkiness for now.   Got to get on with my closing spree :)

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17317611
First of all, the ellipsis is a character.  That character should be used instead of using a bunch of periods.
Second, if you want to increase your letter spacing, there is a CSS property for that:
http://www.blooberry.com/indexdot/css/properties/text/letterspace.htm

EE used to be a place where we could discuss and promote the standards...  it has changed a lot.
Since a large majority does not seem to care about that at all, i'll go preach somewhere else.
0
 
LVL 3

Author Comment

by:lovewithnoface
ID: 17317732
the ellipsis is a character.  and you can increase your letter spacing.

but when each page had 30 or so ellipsise, it's just not worth it, especially when there are no html savvy people editing content once it's already in html form.

for my purposes at least, &nbsp; works perfectly, especially when someone is copy editing and notices a mistake (something that is off by a space or a period) and wants to fix it.

and that's why i commented when i accepted angelIII's answer.  a lot of people have given a lot of time and they were a wide array of answers, but i accepted what helped me.  i gave 500pts because i was in a hurry, and i got a quick answer but left this open for discussion or possible better answers.  i lot of the answers here i can't evaluate because i don't know much about them offhand and don't have time to test them, and I hoped that not everyone was in it for the points, and that someone looking at this as a PAQ would hopefully scroll down to my author's comment.

I very much value EE as a place to discuss and promote standards and I put a lot of effort into choosing answers for PAQs and writings notes at the end.  this time, i didn't have any basis with which to divide points by other than doing the standard splitting up points to everyone, and i didn't feel i could do that when i didn't know what everyone else was talking about.

it's my responsibility as an author to give an evaluation of answers, saying this is accurate, helpful information, and if i can't do that, i'd better not at all.  i couldn't do that beyond the information i did directly use and i'm sorry if that offended you, but that's how i do things.

I would again however, like to thank everyone for the time and effort and creativity they put into their answers.  I appreciate it, and hopefully so will someone down the road someday.    And I'm sorry I didn't know enough to give out more points this time.

cheers
lovewithnoface
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17318976
It's not your fault.  I just think that there is a general lack of quality in the discussions... not only this one.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Set time on Session (ASP) 14 30
CSS Style Effect 2 18
Html split(text) Part2 6 20
Scroll 5 news at a time using vticker 2 6
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question