I have a web page that displays a pdf document. In the header there is an image and an h1 tag that contains a name. When the name is too long, it gets cut off. How can I force it to wrap to the next line instead so that the entire name is displayed? I tried inserting a style="white-space:normal" but it doesn't help. Any suggestions?
word-wrap:break-word;
It should have the combination of two:
word-wrap: break-word;
white-space: normal;
thanks to Tor and Alex :)
h1 tags wrap by default. If they're not, something in your CSS is overriding that default behaviour. If you can post a link to the site, we can quickly help you out. You might want to consider installing Firebug for Firefox - it'll let you right-click on the h1 and view what styles are being applied to it, and from where they come.
Is the header contained wihtin another element such as a div? If so, check the overflow for that element and/or try setting it to visible like this:
style="overflow:visible;"
the h1 tag has a zero line height
style="line-height:100%;"
Related
This regards HTML emails...
For some reason email-clients are adding an extra space after a text link.
Here's the code:
foo
So clients will display this as 'foo '
Any ideas where this extra space comes from?
Try to use display: block; or display: inline-block; for your a tag.
It won't show the white space in its current form. If you have wrapped your a tag within td or span, you may have missed something there. I mean the container of a tag, otherwise it should just work fine.
Can you tell me why the table cell with text is going out of the div?
My code:
http://nocleg-i.pl/1969/wyszukane/
It looks like a long text link is the culprit here. In cases such as these, you can simply use CSS to force word-wrapping. Just apply the following to your stylesheet and voila!
div.text_exposed {
word-wrap: break-word;
width: 500px;
}
(Please note that it is required to set a width for the word-wrap rule to apply)
As #Vinny Burgh said, the long link is the problem. However, Don't leave the anchor tags blank. Add some words to it so the url doesn't show up and the content doesn't break.
Missing text-Input text here
Basically, you have to put some text where I imply above.
Or, it could be a html bug, maybe some unclosed anchor like this:
<a href="the_actual_extra_long_link double quotes to close the href and a > symbol may be missing </a>
<div id="id_4f4e2a34992008a12697010" class="text_exposed_root text_exposed">
It's working good when I translated to English, browser does not support your language.
I think the problem is in your class. Remove the div class and and retry.
I have a superscript that is messing up the line spacing. How do i make it even?
I tried
sup{vertical-align:0; position: relative;}
but that doesn't help.
Any suggestions?
We can achieve it by ignoring the <sup></sup> tags and directly using something like
<span style="position:relative; top:0.3em;">
You may need to try altering the line height of the sup element to be smaller than the parent text.
sup{vertical-align:super; line-height:0.5em;}
http://en.wikipedia.org/wiki/Superscript has lots of examples that you can inspect. Some of them increase the line height of the parent, some do not.
If that isn't working for you, you can also try
sup{vertical-align:top;}
sup{vertical-align:top; line-height:0.5em;}
This works for me, even though I have sup defined in my stylesheet. I have a link, which also has styling applied, between the <sup> and </sup> tags, but this seems to force the intended effect of keeping the line spacing consistent.
I've noticed that in jsFiddle, the header tags (<h1> -- <h6>) don't "enlarge" (or otherwise style) the text as expected.
For example: http://jsfiddle.net/Bubby4j/KURKp/
I was expecting to see the text larger, but it looks like regular text. How can I get the normal behavior back?
You can now untick "Normalize CSS" in the "Choose Framework" section of the panel.
jsFiddle currently forces normalize on all fiddles - I hope to have it changed to optional mid Feb. Annoying indeed - no idea what I was thinking.
If you mean "doesnt work" in terms of the font size not being what you regularly see, that is because font-size:100% is inherited from the jsfiddle stylesheets for h2-h6.
You can redeclare your own rules with h2 { font-size:2em; } or any value you like in the CSS tab.
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line