keep text together

Posted on 2006-07-08
Medium Priority
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

text text text text text text text text text
text text text text text text text text te .
. . text
Question by:lovewithnoface
LVL 143

Accepted Solution

Guy Hengel [angelIII / a3] earned 2000 total points
ID: 17066106
you should use   instead of simple space for those...

Author Comment

ID: 17066140
that will help?
LVL 16

Expert Comment

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.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.


Author Comment

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

Expert Comment

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>

LVL 17

Expert Comment

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

     text text text . . . text text

Author Comment

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.

LVL 30

Expert Comment

ID: 17067390
The white spaces is controlled by the "white-space" css property:

<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:

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

    span.ellipsis {

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.
LVL 44

Expert Comment

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.
LVL 30

Expert Comment

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.

Author Comment

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 :)

LVL 30

Expert Comment

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:

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.

Author Comment

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.

LVL 30

Expert Comment

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.

Featured Post

Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
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 tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

587 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