So, this is the exact opposite of the more common question (how to -prevent- text from spilling over).
I am looking for a possible way to -make- text spill over into the next div (automatically).
My site (afurnishedsoul.eu) is designed for horizontal scrolling, mainly because it contains mostly picture galleries.
I also have texts that I would like to present in this layout. If you want to picture it, imagine the divs containing the text arranged like a long row of pages from a book.
I would like the divs to behave in the following way:
They load the text (maybe, if necessary, from an external text file) and distribute it across several (the needed number of) divs.
From one page/div to the next, the text distributes evenly across the layout. All 'pages' start at the same height and end with the same lowest line, i.e. the layout is even and maintained.
Text spills over automatically from one div to the next - if you are familiar with InDesign, I want the text to behave like it's on a path.
The amount of text displayed in one div is flexible/variable, i.e. if text size is set to large in one browser, the text will distribute different from a browser with a small setting. The layout of the page overall always stays the same, but the text divides up across it automatically according to those parametres.
I know this is a tricky one, if there is a solution at all. I'd be all the more glad if somebody could help me out. The solution can be CSS or HTML preferably, but also other if necessary. Thank you all who read this, Jeff.
Related
I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).
I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.
Is it really that complicated? Or am I just missing something obvious?
Please, please help.
I apologize for the "subjective nature" of this request.
So you want the font size to change depending on window width?
In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.
Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,
The problem is that my divs are being ordered so that the first column collapses first and is read first on mobiles (intended).
But on word-wrapping at very specific screen dimensions, the divs get out of balance and now look a little funky on their vertical balance with each other.
An image can be found here (red shows divs):
What I want is to add some space on the text that wasn't word wrapped so that
Personally, Id say the current design works well, as it can fit and change to different screen sizes, the fact that it doesnt line up is understandable as the word is just to long.
However if you wanted to you could set a min-width on the container which represents that box. This means the word wouldnt be wrapped when the screen gets smaller. But it could come with side effects as it will push over the other two divs depending on how the css works.
If I have a container with some text in it, is there a way to break the line in half, rather than based on some fixed width?
For example, I would normally assign a width (say, 200px) to a container before placing some text in it. Often this can lead to an awkward line break where only the last word in a header must wrap.
This is a header that is
long
versus
This is a header
that is long
Ideally it would only break if the text didn't fit on one line, and if it broke, it would do so in an even way. Would be happy with just always breaking in half as well, though, since that seems pretty complex for CSS to do alone.
Unfortunately, this is not possible in pure CSS. This this jQuery plugin automatically breaks your line of text nicely in 2 when the container is smaller than the text width:
https://github.com/SumoSoft/PrettyBreak
I recently launched a responsive version of my site, however I'm finding that percentage width divisions containing a number of single lines of text look really bad, as fitting everything on a single line in both the desktop and mobile views results in each single line of text being either too long or too short.
My markup is a single unordered list of links (with long anchor texts) - does anyone have any suggestions to truncate the anchor text according to the width of the containing division?
I can come up with two options:
One is to do it yourself using javascript as described here:
Calculate text width with JavaScript
I don't think there is any way to determine the width of the text until the browser actually renders the text.
Make sure you don't display: none it, or the browser won't actually render it and you can't determine the width.
The second is to let CSS do it for you; it's easier, but you lose pretty much all flexibility:
If you're willing to let CSS guess at how to cut off your text into ellipsis, you can try text-overflow: ellipsis
http://www.quirksmode.org/css/textoverflow.html