disable word wrap

[george]

I fill a div with a long string of text. This text is decorative only. So I want a new line upon filling a line with characters, as opposed to words. How can I do this?

[jeffman]

Try this: http://www.w3schools.com/css/pr_text_white-space.asp

[george]

Try this: http://www.w3schools.com/css/pr_text_white-space.asp

That was the first place I looked. That solution requires a br tag after so many characters in a line. Problem with that is that white space takes less space than a character, and is font dependant. I guess I have to write a javascript to break my string down into exact lengths, and then insert a br tag. I was hoping there might be an easier way. Thanks for looking for me.

[ShadowMage]

What about word-wrap?It's CSS3 so older browsers might not support it, but if that's ok with you it should work.

[jeffman]

I think I misunderstood the original question.

[george]

I think I misunderstood the original question.

Ok, with word wrap, we get a break on a white space when the last complete word has been added to a line. This makes the right edge of the print appear jagged, because each line of text is a different length. What I want is similar to full justification in a word processor, where both the left and the right text edges are flush with the margin, no jagged appearance. The way word processors handle this is by adjusting the white space within each line of text. My preference would be to obtain full text justification by inserting a line break anywhere within a word. The purpose of the text here is decorative, not legibility. This would be made easier by using a courier font. But I would prefer using a Verdada font. If I can get the pixel length of each character and a white space in the font, then I could create a JavaScript to insert a line break in all the right places along my very long string of words. I was hoping for there was an established way to accomplish full text justification using CSS. How can I find the pixel length of characters for a particular font? And would thes lengths be the same on different browsers? Thanks

[jeffman]

The lengths would be different in different browsers and on different platforms. It's also possible that a user will install a version of a font that has the same name as the original, but different characteristics.I recommended something like this technique to someone a few years back and she seemed to have luck with it.If you put a character in a span, then get the offsetWidth of the span, you know the width of the character. You should be able to write a utility that gets the widths of all characters. To keep it hidden from users while the utility runs, you might be able to do all the work in a div positioned off screen. If IE or something doesn't like that (I don't remember) you could do it at the bottom of the screen using text with the same color as the background.I don't know offhand if a browser inserts microspacing between characters when they are in sequence that is not there when a character is in a span by itself.I'm still not clear on your exact goal here, but that might not matter.

[george]

Thanks Deirdre's Dad, that gives me what I need to accomplish my goal. This site is for a clothing store, and for a background they want the names of a number of popular labels. I could make an image file. That would be the easiest solution. But I want more control, so I can change font and font size, or add new lables to the repeated string. I tried to post a link to the web site yesterday, and got an 'forbidden' error when I tried to post it. I suspect that this was because the store name is Labels Exchange, and the URL looks like it has the word '######' in it.

[jeffman]

So your goal is to take a string to long for the box and trim it so it fits. That can be done several ways. How you gonna justify it?

[cousineaug]

Ok, with word wrap, we get a break on a white space when the last complete word has been added to a line. This makes the right edge of the print appear jagged, because each line of text is a different length.

have you triedtext-align:justify

[george]

have you triedtext-align:justify

Wow. I hadn't seen that option before. And it works fine for a large width box. Not so well for a small width box. Since I will be using one large width box and two small width boxes, I would say my problem is half solved. Thanks Guy.

[george]

So your goal is to take a string to long for the box and trim it so it fits. That can be done several ways. How you gonna justify it?

With JavaScript. I will use this method only on my smaller width boxes. Step by step: Determine the total width I need in pixels. Then create my one large string, and assign it to a variable. Create an array of letter and space widths in pixels, as you showed me, by creating a span for each character, and using the offsetWidth property to get the length in pixels of each character. Create an empty variable. Append a character at a time from the large string to the small string. Add the width in pixels of each character as I go to a counter variable. Once I get to my desired length, I insert a BR tag, and start my counter over while continuing along the same long string. There will be a little jagged edge due to the relatively rare occurrence of a line break on a space, and that's ok. I will have adverted the deep jagged edge which normal word wrap gives me. Again, the result is intended for aesthetics, not readability.And thanks again. I always learn here.

[jeffman]

I got curious, so I spent some time experimenting. The problem I kept hitting is that a string that has been trimmed to fit inside a box cannot be justified. Text can only be justified when there is a reason for it to wrap. CSS3 will provide some nifty ways around that, but we are not there yet, and of course there's IE7 to consider.With a little math, you can add pixels between words to bring the total width up to the width of the container. But of course you can't add a pixel to a character (yet). The solution is to wrap EVERY character in the string in its own span. If a span is defined as inline-block, pixels can be added to the width.The following solution works in all major browsers, including IE7-8. It's a bit verbose, with loops that almost seem redundant, especially the last two. But my monkey brain is tired. Efficiency suggestions (from anyone) are welcome. (Just try them out first. A lot of things DON'T work.)The box where the text is to be written must have the following CSS:

white-space: nowrap;overflow: hidden;

JavaScript

// str is the string to be trimmed and justified// box is a reference to the string's container element// offset is the sum, in pixels, of box's horizontal padding and bordersfunction trimAndJustify(str, box, offset) {	var boxWidth, container, spans, spaces, paragraph;		// create an inner container	container = document.createElement('span');	box.appendChild(container);		// wrap every character in a span; populate container with all spans	str = str.replace(/(.)/g, "<span>$1</span>")	container.innerHTML = str;		// right-trim one span at a time until the string fits inside box	spans = container.getElementsByTagName('span');	boxWidth = box.offsetWidth - offset;	while(container.offsetWidth > boxWidth) {		container.removeChild(spans[spans.length - 1])	}	// remove any trailing span that contains a space	if (spans[spans.length - 1].innerHTML == " ") {		container.removeChild(spans[spans.length - 1]);	}		// build an array of all spans containing spaces	spaces = [];	for (i = spans.length - 1; i >= 0; --i) {		if (spans[i].innerHTML == " ") {			spans[i].style.display = "inline-block";			spaces.push(spans[i]);		}	}	// one at a time, widen spans containing spaces by 1px until box is exactly full	i = 0;	while (boxWidth > container.offsetWidth) {		spaces[i].style.width = spaces[i].offsetWidth + 1 + "px";		i = (i < spaces.length - 1) ? i + 1 : 0;	}		// allow subsequent strings to display below this one	container.style.display = "block";	}// END trimAndJustify

[jeffman]

A nice tweak would be to write the strings into the HTML itself (not the JavaScript). You could parse them anyway you needed and pass them one at a time to the function. That way they don't have to be coded into the JavaScript where they really don't belong.

[george]

I thank you for your tired curious mind.

[george]

I have moved my project to a URL for viewing. I put all the text into the HTML, and it comes out with the background as I had hoped. I can change zoom levels and text size, and still get a full screen view of the background text. Now my problem is that my client wants the header section to be in the fixed position, while allowing the content to scroll. As I have it now, the background remains fixed, but the content box moves up as I scroll down, covering the area she wants fixed. I could accomidate this by containing the content in a scrollable div, but my client would prefer the browser window scroll bar be used.

[cousineaug]

I put all the text into the HTML, and it comes out with the background as I had hoped. I can change zoom levels and text size, and still get a full screen view of the background text. Now my problem is that my client wants the header section to be in the fixed position, while allowing the content to scroll.

cool....a question of search engine optics. Perhaps the real content should come first and the background DIV come afterI wonder about repeating the same trademark several times in REAL TEXT---would Google consider that spamming?Also along the lines of credits for images, do you have permission to use someone else's trademark?back to the questionposition the background AFTER the contentplace it FIXED TOP LEFTgive it a negative z-index so it slides below the main bodydisclaimer: running around today so I did not get a chance to test any of this outGuy

[george]

Great points Guy. I will take up the question of legality of using the trademarks with the shop owner. SEO wize, repeating the trademark names probibly is a Google no-no, but then again, this is a small shop, one retail outlet for used clothes. We don't need to be found by anyone outside the city. I'll give your coding suggestions a try thisevening. Thanks a bunch for your help.