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>
Related
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
The html attribute dir and the css text-align property acheive the same result. E.g. consider the two cases:
dir="rtl"
<p dir="rtl">
one two.
</p>
text-align: right
<p style="text-align: right;">
one two.
</p>
The only difference between these two results is the placement of dot. Why isn't <p dir="rtl"> one two. </p> translated to .owt eno? If it can't then what is the use of dir attribute at all?
The placement of the dot is the crucial point of the difference between dir and text-align. Handling right to left scripts is much more involved than handling the alignment of the text. To understand better, read
https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
A sequence of rtl characters such as سلسلة نصية الذهاب works automatically because of the Unicode bidirectional algorithm relying on the character's directional properties, but you need more to properly handle punctuation, images, and bidirectional text.
bdi is an element, not an attribute name.
don't get bdi confused with bdo. The former applies heuristics to guess the direction of text, the latter overrides the bidirectional algorithm (and is very rarely used).
For a more complete picture about how to work with RTL (or actually bidirectional) text in html, see
https://www.w3.org/International/tutorials/bidi-xhtml/index
Is it possible to transform a phrase to plural using just CSS, based on the number within the element?
I'm guessing this breaks a presentation/data separation boundary philosophy, but just wondering if it's possible. It's easy with JavaScript, but wondering if CSS can take care of it.
<span class="plural">0 book</span>
outputs: 0 books
<span class="plural">1 book</span>
outputs: 1 book
<span class="plural">2 book</span>
outputs: 2 books
No. CSS cannot read the content of the element to determine what number it is, and CSS doesn't have if conditions.
If you would only apply .plural to items that should be regularly pluralized, you could do:
.plural:after {content: "s"}
But then we run into the problem of how English is irregular, and not all plurals are guaranteed to end in "s".
Going to try answer this myself, as it seems a pure CSS solution is not possible. I've found a small workaround here that works for me. It's not ideal, but may work for others too..
I just render the number behind the plural class name and wrap this around the s. Then I use a class for plural1 that hides the s.
This works for me because I use templates to render my html and it's easy to slot the numbers in.
.plural1 {
display: none;
}
<div>-1 book<span class="plural-1">s</span>
</div>
<div>0 book<span class="plural0">s</span>
</div>
<div>1 book<span class="plural1">s</span>
</div>
<div>2 book<span class="plural2">s</span>
</div>
Pros: This can work for other endings and other languages too. Negative numbers are supported.
Cons: Adds unused classes to your elements (plural2, plural3, etc.) that the browser will need to read and ignore. Not really an issue for a small number of object though (eg. 100).
I have product models that look like:
EF 200
That appear in paragraphs of text. I want to prevent the model from being wrapped between two lines due to the space. What method can be used to prevent the wrap? Do I need to enclose it in a span tag and, if so, what CSS property prevents the wrap?
<span style="white-space: nowrap;">EF 200</span>
Of course if you're going to re-use that anywhere, I would break it out and make it its own class.
CSS
white-space:nowrap;
HTML
EF 200
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.