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
Related
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
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,
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
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.
How I can align a text/pargaph both to left and right in HTML? Like in the office programs.
text-align: justify; in css
but beware: unlike in proffesional DTP applications or even in word, HTML/browser often do not play nicely with this - you might end having humongous gaps in your text, completely destroying any typogtaphy you try to achieve in your document.
Edit:
As reply to Brian, my experiences are following:
haven't tried % for width, because I either set width in px or not at all and let display:block; element fill whole width of parent
text-align: justify works best with small font-size with slightly higher line-height - line-height is for readbility and smaller font size puts more characters in one line (abstract characters-per-line width), therefore gaps between words/justified text looks better
regarding images instead of small non changing parts of text - I tend to use as few image replacement parts as possible - I have very good results with Cufón, if you learn to count with it's cons
I don't advice using justified text for sidebars and one-liners - it mostly seems ugly
Edit2:
The main problem is, that browsers don't know how to part your text (i.e. unbreakable to un-breakable) - soft hyphyen, should solve this (link: soft hyphen overview), but browser support is wild at best :)