On my website all of the text between the apostrophes (the words "what's" and "journalist's") have larger spacing than the rest of the text. http://heiditaylorlaw.com/about_me.html Why is this? I tried using the word-spacing tag in CSS with no luck.
The problem is text-align: justify;. According to w3schools:
justify Stretches the lines so that each line has equal width (like in
newspapers and magazines)
However, you can use text-align:left; instead of text-align: justify;.
Related
I have a span text that should change to:
font-size: 13px;
line-height: 1.38;
Using Bootstrap I noted that the line-height doesn't have any effect. I can see changes only when I set the value more than 1.6 onwards...
I added !important, but this is not changing the big space I have between lines, which should be less as showed in the designer prototype.
Do you have any idea why this is happening?
That is because the span element is an inline element that provides no changes when line height is applied on it.
You should rather wrap up the text in p or paragraph tag to make the line height work effectively.
This is the code:
#content{width:400px;}
h2{margin:0px;line-height:100px;}
<div id="content">
<h2>Hello world. Hello world. Hello world. Hello world. Hello world.</h2>
<span>goodbyeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</div>
See how the code work here
I need a way to put the "goodbyeeeeee.." string 2px below the h2 headline without ( if possible ) using margin with negative numbers ).
Obviously I need also the space between the 2 lines of the h2 headline.
EDIT: I can also avoid to use line-height but I need the space between the 2 lines of the h2 headline.
I don't think it's possible to change the way line-height behaves. It puts the text of the h2 in the middle of the 100px high line.
So, sorry, but no. Unless you find a way to get rid of the line-height property, you're stuck with using negative margins. Or relative positions.
Edit:
If you do use a negative margin, please put in on the h2 itself, not on any other element that happens to come after it in your current page. The h2 is causing the problem, so that's where you should solve it.
Setting the height could do it, depending on the situation.
h2{margin:0px;line-height:100px;height: 157px;}
If you want the large spacing between the two lines of the h2 but want the span text hugging the bottom of the second line of the h2, you can set the span to display: block to enforce the negative margin:
h2{margin:0px; line-height:100px;}
span{display: block; margin-top:-40px;}
I have a css class on a textarea like this..
.expanderHTMLText{
font: 12px Arial, Helvetica;
min-height: 50px;
white-space:nowrap;
}
I do not want words to break in between long words, but I do want the text to fill the box not be all on 1 line with a scroll bar. I want to get rid of the horizontal scroll but not have to break the words to do it. How do I accomplish this?
Remove white-space:nowrap; line and it will not be on one line.
Edit:
Who down-voted me? Please give me an explanation for that.
white-space: nowrap; explicitly defines, that wrapping will not occur. The only way how text can be wrapped is by removing or changing this property.
Default value for white-space property is normal, which acts almost identically to nowrap except it will wrap the text (collapse spaces).
If you do not want to words (even long ones) to be split on multiple lines, you will need to add word-wrap: normal; as JSW189 suggested.
But then you would still get a horizontal scrollbar if you would have a word which does not fit on one line - but thats obvious, you will either have word on multiple lines, either scrollbar.
I'm trying to create a border around an <H2> and the border is always rendered much larger than the <h2> text. No size is set anywhere. The H2 contains one sentence of text with a 25px font size, and let Chrome Developer Tools -> Metrics reports that the size of the H2 is 980x183, and I can visibly see that this extends beyond the text to the right, all the way up past the text to the top of the screen, and far, far to the left of the text.
So, with no size being set, how can the area of the H2 element be so much larger than the text? I might need to provide a lot more context for anyone to answer this, but it seems almost like the question should be able to stand alone.
The <div> containing the H2 is 0px x 0px, which also blows my mind a bit, but I've googled around quite a bit and don't feel that is likely to be related.
Try adding CSS:
h2 { display: inline; padding:0;margin:0}
h2 elements are displayed as blocks with default margin and padding
<h1> is a block-level element, which by default stretches to the full width of its container. That would mean that the width of the h2 box and the h2 text is not the same.
I'm not sure about your specific case, but you may want to change the display setting to either inline or inline-block and experiment with the results of those.
I have the following style already: white-space: pre-wrap;
This allows newlines to be treated as newlines (and spaces don't get collapsed) for the element.
Now I want to apply text-indent: -40px; padding-left: 40px; in an attempt to produce something like this:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they exceed the
maximum width then they wrap and indent.
Unfortunately, it's not doing quite what I intended:
This is a long line of text (or at least, just pretend it is) so it
will indent when it wraps.
Further lines of text appear as normal, but again if they
exceed the maximum width then they wrap and indent.
Is there a way in CSS to indent wrapped lines, but counting newlines as a new first line?
No, because text-indent relates to the first line of an element, and newlines generated by line wrapping do not create elements. So instead of just newlines in HTML source, you need to use some content markup.