In HTML, is there a way to evenly distribute text that is broken across multiple lines?
E.g., I don't want:
Here is some really long label that ends up on
two lines.
I'd prefer:
Here is some really long label
that ends up on two lines.
Adobe has proposed that a new css property be added text-wrap: balance.
In the meantime they have created a jQuery plugin named balance-text to achieve the same result.
Somewhat of a workaround, but you can use non-breaking spaces for the last few words:
<p>Here is some really long label that ends on two lines</p>
In pure HTML/CSS there isn't a way to accomplish this, because there is no way to measure the length of the line.
One way to do this would be with javascript, but you will end up with a FOBUC while the javascript calculates the line length and splits it accordingly.
The best way to avoid that would be to split the line with PHP/ASP/Whatever you're using.
I think you can achieve that if you set fixed width of the element-container and play with padding properties.
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
Is it possible in html/and if so how?
I want to make something like:
Text
(10x space)Text"br"text
How to make it happen, as for current knowledge only possibility seen "left center right"
SOLVED
...........was in between..............
solution of   correct, however its unperfect:
As it would take huge amounts of spaces to adjust to long sentences especially,
separate spaces after "br" would be needed as well.
any better solutions?
https://i.stack.imgur.com/50s0c.png
...........................
padding not worked, is it is only for css? Or did i wrote it bad?
<P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>
Use HTML Entity: for spaces in HTML.
e.g.,
<p> Hello World</p>
UPDATE:
We also have Other spacing entities in HTML: In case you want play around.
—the em space; this should be a very wide space, typically as
much as four real spaces.
—the en space; this should be a somewhat wide space, roughly
two regular spaces.
—this will be a narrow space, even more narrow than a regular
space.
However, if you require a lots of spacing I recommend using CSS padding and margins as per your requirement. :) If you do not want to use a CSS file. You can do inline-style as shown below:
CODE DEMO:
<div style="padding-left:16px">Music Memes</div>
<div>Lectures...</div>
And yes coming to your last statement. Yes indeed <P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>, this is not the right way to do it :)
Why to use this in the code while coding?
Where to use this? why the code need this?
Referring to which context we should write this?
How to display text exactly in the center, with equal distance from all the sides?
This code is used to apply a space within your code, you may have noticed when writing HTML, if you leave a massive pile of spaces between two words, the browser ignores it, and therefore thats when
is needed.
If you want to center text, there is a number of ways you can do this, the best way is probably to use the CSS rule:
text-align: center;
See this for more info:
http://www.w3schools.com/cssref/pr_text_text-align.asp
is an HTML entity encoding a non-breaking space. If you separate two words with , web browsers will not split the words over two lines.
  is almost always a typo.
People frequently use with normal spaces to add extra horizontal whitespace.
There are other posts covering how to centre text vertically and horizontally - see https://stackoverflow.com/search?q=vertically+horizontally+centered+text for a range of answers.
is a html ascii character. It represents a space.
When you add multiple spaces after each other in html they will be truncated and only one will be displayed in the rendered page. when you use all spaces are rendered on the page.
I set up a webpage like the one detailed here: http://alistapart.com/article/holygrail
(An example can be found here: http://alistapart.com/d/holygrail/example_4.html)
My problem (which may sound contrived and if that bothers you, let's take this as a fun exercise in CSS) is that if you take out all the spaces and any other characters that allow a string to break, the text will overflow or get hidden behind the right column:
The ideal solution is to put an ellipsis whenever that happens so that the user knows that there's text being hidden. (Note that I don't want to force breaking between letters because the rest of the paragraph has normal-sized strings that should break on spaces or punctuation.)
I can't seem to get text-overflow to work anywhere. The best I can do, it seems, is to just apply overflow: hidden but that's a severely less-than-ideal solution.
Can anyone show me (using CSS only, hopefully. I'm not interested in doing text calculations in JavaScript) how I might be able to add an ellipsis for this particular problem?
Try this css
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/