By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

Text goes outside my div

P: n/a
Hi everyone.

I have a page[1] in which I've got some code snippets inside a pre
within a div, but the text on some lines (if the window is narrow
enough) goes over the edge of the div. Is there a way I can get the div
to appear wider to accommodate the text?

Thanks,

Cameron

[1] http://www.csse.monash.edu.au/~clm/csvg/examples.html

--
Cameron McCormack
| Web: http://mcc.id.au/
| ICQ: 26955922

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
*Cameron McCormack* <ca******@aka.mcc.id.au>:

I have a page[1] in which I've got some code snippets inside a pre
within a div, but the text on some lines (if the window is narrow
enough) goes over the edge of the div.
In CSS3 there'll probably be "white-space: pre-wrap" (among similar stuff),
which rewraps while letting the whitespaces remain intact. (Opera has
already been supporting it for several version, currently as '-o-pre-wrap'.)
Is there a way I can get the div to appear wider to accommodate the text?
You could count the amount of characters in the longest code line and set a
fixed width for 'pre': the number of characters with 'ex' as the unit.
That's not exact, but comes close with many fonts. (AFAIK Gecko also
supports 'ch', which stands for "character", and should give better results,
but isn't in the standard, not even proposed.)
Otherwise the width is determined by paddings, borders, margins and widths
of itself and the containing boxes (div.code, div.main, body, html, the
viewport).

Hackish, but somehow working in actual browsers is floating 'pre' or
'div.code' without a given width opposed to the requirement of the spec. By
the way, why don't you use 'pre.code'?
[1] http://www.csse.monash.edu.au/~clm/csvg/examples.html


P.S.: Your alt texts are not so good, e.g. try "" and "XML file &rarr; XSLT
%rarr; SVG file" for the first two. Horizontal OR vertical layout should be
enough, too.

--
Sig for rent. Good as new.
4 lines max. 80 letters.
0,02/post
Jul 20 '05 #2

P: n/a
Some entity with my name and body:

In CSS3 there'll probably be "white-space: pre-wrap"


As it seems it's already coming with CSS 2.1 together with 'pre-line'.
Example given for expected behaviour:

p {white-space: normal}
pre {white-space: pre}
td[nowrap] {white-space: nowrap}
pre[wrap] {white-space: pre-wrap}
:before,:after {white-space: pre-line}

IMHO for 'pre' in practice 'pre-wrap' is often the better choice and had
been added to my user stylesheet a long time ago (currently as
'-o-pre-wrap', though). That's at least true when the 'pre' surrounds source
code, but not so much for ASCII graphics.

--
"Not only does God play dice with the universe,
but sometimes he throws them where they cannot be seen."
Stephen Hawking
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.