For example I don't want that the word “Call” to be sliced in “Ca
ll”, but I want to apply 'white-space:wrap;'
//'float:left;' it place the text next to the image.
<div style="float:left;"><img src="img.jpg" /></div>
<div style="color:gray;word-wrap:normal;white-space: wrap;">Why my text is sli
ced. </div>
This may be the rule you're looking for but see how it works in conjuction with your other styles.
word-break: keep-all;
Other values are normal (only breaks on spaces and hyphens) and break-all (the line will break at any character)
<div style="color:gray;word-wrap:normal;white-space:wrap;word-break:keep-all;">
Why my text is sliced.
</div>
On another note - in your question you actually have a line break within the word - the browser has no way of knowing this isn't two words and will always break there if needed. Are you pasting text in from a document that is entering line breaks when it wraps your text to a new line perhaps?
Related
I'm maintaining an online newspaper editor, and I've stumbled on a weird issue, where text doesn't want to be justified with text-align:justify. After a few hours of debugging, I noticed it might have something to do with the output HTML indenting (which sounds realy weird to me).
Obviously the raw HTML output of my editor page isn't indented, but a text field has a basic structure like this:
<div>
<p>
<span>
<span>
<span>
Hello
</span>
</span>
</span>
<span>
<span>
<span>
World.
</span>
</span>
</span>
</p>
</div>
Every word is wrapped in 3 spans(rendered by JS/jQuery, for styles, fonts & uniformity between browsers), and I put the text-align:justify; in the <p> element.
Here's some sample code:
https://jsfiddle.net/tdje0a9L/
As you can see, the text isn't justified.
But now, when i indent the exact same HTML code, it becomes justified: https://jsfiddle.net/3v7vk24d/
I can't realy do much about the multiple span wrapping, that's just how the editor works.
Now is my question:
is there any way to render the output HTML indented?
(to get my text justified)
or
is there an other way to get my text justified?
It is because you have (non-breaking space) entities in you source code - that means that you code really don't have spaces between words.
So for text-align: justify it seams to be one word.
Your example will print: Donec quam felis as one word
You can look in this question for some more information how you can remove your unwanted entities: How to remove from the end of spans with a given class?
I am using the bootstrap jumbotron but the header wont wrap in next line when long text is used. any way to fix it?
This is what I am using in my html
<div class="jumbotron">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p class="lead">Help visualize leadership networks in the Upper Midwest</p>
</div>
Try the following on the text that you want to wrap on to the next line.
h1 {
word-wrap:break-word;
}
This will break up the long word at any character though. See the links below for more information.
mdn doc for word-break
css-tricks
I'm playing around with word-wrap and white-space for a while now, but I cant get this to work. I want no word separation in my headings, so long words should just be put into the next line. To clearify this, if the container is too small, I dont want it to behave this way:
A veeeeeeeeeeeeeeee-
eeeeery long heading
I want it to be that way:
A
veeeeeeeeeeeeeeeeeeeeery
long heading
This is my markup:
<header>
<h3>Some random blog heading</a></h3>
</header>
CSS:
article h3{
width:200px;
word-wrap:normal;
word-break: normal;
white-space: nowrap;
}
I think I tried every possible combination, but it didnt do what I want. I cant imagine that it isnt possible.
If you currently see a word divided in two lines as in your first example and you don’t want that, you just have to locate the thing that causes the word division. This can be CSS hyphenation with the hyphen property, or it may be caused by the SOFT HYPHEN character (possibly inserted via scripting), or even a common hyphen character “-” in the word – most browsers treat it as allowing a line break after it.
If you need help with the analysis, I think you need to reveal some of the actual content and markup and perhaps styling and scripting.
Apply css on it
<div style="word-wrap:break-all;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
or
<div style="word-wrap:break-word;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
I've worked at few places and seen two different methods of doing a section or line break in HTML.
One way I've seen it done is like this:
<div class="placeholder-100pct"> </div>
And the other is just using plain old <br />.
Any benefit to one over the other or would it be just a matter of style?
Use <br/> when you want a new line in a paragraph, like so:
<p>Hi Josh, <br/> How are you?</p>
This might be useful when writing an address:
<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>
Using a div will automatically give you a new line, but if you want a space between two elements, you can use a margin on the div.
Do not use <br/> to get some space between two divs:
<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>
Hope this helps
A div is a generic container. A br is a line break. Neither is particularly well suited for expressing a section break.
HTML 5 introduces sections. You mark up each section, not the break between them.
<section>
<!-- This is a section -->
</section>
<section>
<!-- This is another section -->
</section>
Use a <br /> when it makes semantic sense to do so. If all you need is a line-break, that's what it's there for. If you're trying to split sections of different types of content, then each section should be in a container of its own. For example, if you have an address where each line of the address would show on a separate line, it would make sense to do:
<address>
123 Main Street<br />
Anywhere, USA 12345
</address>
One obvious difference is that <br> is inline element, while <div> is not.
So this:
<span>Some text broken into <br /> lines</span>
... is valid HTML code, while this:
<span>Some text broken into <div> </div> lines</span>
... is not, as you cannot place block elements inside inline elements.
<br> has the disadvantage of limiting the size of your gap between sections to the line-height applied to or inheritted by the <span> it sits within.
In other words, with <br>, the size of the break can only ever be exactly the height of one line of text.
Definitely wrap each your "sections" in their own tags, and use margins to control spacing, if you want to retain any control over the spacing. The difference is not just in the semantics of markup.
If you are looking to provide a break between two sections of content in the sense of a thematic break, then <hr> is the element you should use.
W3C specification
The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
It's also relatively straightforward to style these as needed as they can take whatever size you require. Note however that it is a void element and cannot contain content (although you can of course add a background-image to it as needed).
Does it matter ever , Whitespace between HTML elements in source? when we give style through CSS? and need cross browser compatibility
For any browser?
Yes, for example: pretty much any time the data is inline.
Compare:
<p>H<b>e</b>llo, world</p>
and
<p>H <b>e</b> llo, world</p>
Whitespace does matter, but all whitespace is treated as one space. For example,
<span>hello</span> <span>there</span>
Will be rendered by a browser exactly the same as
<span>hello</span> <span>there</span>
Unless a <pre> tag is being used.
Compare these two lines in a browser:
<img src="..." /> <img src="..." />
<img src="..." /><img src="..." />
You'll see that there is a space between the images in the first line, but not the pair in the second.
Text areas are also affected with whitespace between opening and closing tags as it assumes any content between the two are its content that it should show....
Depending on the amount of whitespace within the html, css, or other files, it could have an impact on how long it takes to download to the user's system.
ie6 used to put gaps inbetween some tags when rendered. It also matters when Office 2009 renders it's html emails using word. If you have linespaces it can put in 2px gaps.
As pointed out by Douglas and David Dorward, white space does matter.
However, in HTML blocks (i.e. not javascript or other embedded content-types), all consecutive white space are equivalent to a single white space. That is, hello <b>world</b> is equivalent to
hello
<b>world</b>
The exception to this rule is within <pre>..</pre> blocks, which are white space sensitive by specification.
It depends on the content model of the element containing the whitespace. If the model is text-derived, including when it is mixed elements and text, then the whitespace matters (though multiple whitespace characters are usually collapsed into one and leading/trailing space removed entirely, with the exception of inside a <pre>). If the model only admits element content, then whitespace has no significance at all; e.g., whitespace between a <ul> and its <li>s is supposed to be wholly unimportant.