Solved

keep text together

Posted on 2006-07-08
14
2,709 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 142

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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now