I have some table cells containing dates formatted like this: 2009-01-01. I.E 7 seems to be breaking these into two lines at the hyphen. Is there any way to turn this off?
You are looking for the white-space property, which affords you control over how white space and line-breaks affect the content of your element. To collapse white space sequences, but prevent line-breaks, you can use the nowrap value:
.dates {
white-space: nowrap;
}
<td class="dates">2009-01-01</td>
I'm sure there's a better CSS way but the old way is with a no-break: <nobr>...</nobr> but using no-break will cause nothing to go to the next line.
Another way is to use a Non-breaking hyphen. This way, you can still get wrapping, just not at the hyphen.
Use this CSS:
.nowrap {
white-space: nowrap;
}
Wrap your dates like: <span class="nowrap">2009-01-01</span>.
Edit: the advantage of this solution over others is that it gives you more precise control over what should or should not wrap. Your cells may still wrap for spaces and other hyphens, outside the span.
I've tried all these suggestions. None worked. Found the solution on another Stack Overflow page: No line-break after a hyphen. You can use the code for non-breaking hyphen, ‑.
increase the size of your TD and it wont be a problem
This is NOT the correct way of answering your question, but this is how I do it:
<td>Hello - World</td>
I like this method better because you do not need to add a <style> or class attribute. Also, it makes the text one string so that it cannot be line wrapped by the browser.
Like I said, most people would disagree, but I think this is where a practical solution is better than the standards solution.
My stupid mistake was that I forgot to put spaces between as I set spacing with padding. I had like
<span>Bla 1</span><span>Bla 2</span><span>Bla 4</span> and it wasn't breaking line as I thought it should. So now I have:
<span>Bla 1</span> <span>Bla 2</span> <span>Bla 4</span>
and of course it works as it should and is anticipated.
Maybe my mistake will help someone....
Related
I am using an html template to send emails programatically. I know nothing about html, but I've just learned that it will collapse consecutive white space characters, which ruins my formatting(I am emailing a table of numbers). How can I solve this problem?
Just use <pre> tag like so:
<pre>
This is some text with some extra spacing and a
few newlines
thrown in
for good
measure
</pre>
Working Example: jsFiddle
and a Good reference on pre tag.
If you don't want consecutive spaces to collapse. Just set CSS property white-space.
e.g.:
white-space: pre;
<span style="white-space:pre;"> </span>
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Well, you can use the metacharacter to produce a "non-breaking space." (I used one in-between these two sentences. But I didn't use one here. Notice how the spacing between these sentences is slightly different, and how the last space is twice as wide because I used two tags?)
Fundamentally, I suggest that you should be using <table> tags within your e-mail body, thus identifying the data as "tabular" and giving you a rich array of options (styles, etc ...) for formatting it. It will look much better than anything you could do by means of "ASCII Art ..."
In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as
.expand-click-area {
display:inline-block;
padding:5px;
margin:-5px;
position:relative;
}
This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:
<span class="expand-click-area">this is span text</span>,
Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block.
This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/.
Try wrapping the entire non-breakable text into the <nobr> tag.
In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it.
display: contents;
Hope this helps someone ;)
Imagine I have a long, multi-word line of text in a DIV:
Hello there, dear customer. Please have a look at our offer.
The DIV has a dynamic width. I want to word wrap the above text. Currently, the wrapping happens on a word boundary which maximizes the length of the first line:
|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.
I would prefer that the wrapping happen on the sentence boundary. However, if no wrapping is necessary, I would like the line to remain as one.
To illustrate my point, please look at the various DIV widths and how I would like my text to wrap:
|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer.
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear
customer.
Please have a look
at our offer.
With words, you can use a soft hyphen so that the word wrapping happens on suggested syllable boundaries. If no wrapping is needed, the remains invisible. If wrapping is needed, the is where it happens:
magnificently
Is there an analogous method for hinting word-wrapping in HTML?
Use in words or <wbr> between words, as <wbr> won't introduce a hyphen.
See also:
quirksmode: <wbr> compat list
Not quite exactly, but close: http://jsfiddle.net/uW4h8/1/.
In brief, you should set white-space: nowrap; for you text container and use <wbr> to insert breaks between words as desired.
The elements <wbr> and often work, but not always. They are especially problematic when designing a static landing page that (a) has to work on a variety of screens and browsers and (b) has to look good.
In this case I want control over line-break hints at a variety of different screen resolutions. To do so, I use <br> tags and css. It can become a mess if it gets complex, but I found it works up to a point. For example:
<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>
I then use CSS with media queries to indicate when the various breaks should be triggered.
p.break-hints br {
display: none;
}
#media only screen and (max-width: 300px) {
p.break-hints br.break-small {
display: inline;
}
}
p.break-hints br.break-big {
display: inline;
}
Use a no-break space U+00A0 (or if you have no convenient way of entering the character as such) between words when a line break is not to be allowed, and normal space otherwise.
This won’t work when words contains hyphens “-”, and some other characters, such as parentheses, may cause problems as well, because some browsers treat them as allowing a line break after them. See http://www.cs.tut.fi/~jkorpela/html/nobr.html for a lengthy treatise, including various techniques of coping with the problems. But if you have normal words with normal punctuation only and no hyphens, you should be fine with the simple approach.
I just had the same issue. I had text like the following:
<div>Assistant Something / Anything Pabulum Nautical</div>
Where breaking it after the / character would really help readability.
In my case, I solved it by wrapping the desired "lower line-break priority" chunks with inline-block (now inline flow-root apparently) elements:
<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>
See snippet for results.
.d {
margin: 1em;
}
#b span {
display: inline-block;
}
<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>
<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>
What is a good way to put more than one space in HTML?
To show one space we write . For five spaces, we have to write five times, and so on.
Is there a better way? Is there a special tag to use?
You can use the
<pre>a text with multiple spaces</pre>
tag.
As far as I know, if you are not using CSS then is the only way. These days using CSS and adding a spacer <span> would be more advisable.
You could use something like <span style="margin-left: 20px;"></span> to create some sort of 20px space between two words. Other than that, no.
It is often best to handle this with CSS instead of HTML. CSS gives you more control over the whitespace than the <pre> tag does. Also, browsers apply default styles to <pre> that you might not want.
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
body {
max-width: 12em;
}
<div class="pre">Text that preserves whitespace and does not wrap</div>
<div class="pre-wrap">Text that preserves whitespace and wraps as needed</div>
<pre>Text inside a <pre> tag also preserves whitespace</pre>
To actually insert spaces you are stuck with , the other common thing for spacing things out is to use 1x1 pixel gif and set the images with in the IMG tag.
The simplest way I have used is to add <span style="color:white;">(anything here)</span>
The bit in the span can be as long or as short as you like- it's not seen. The color of course is the color of the page/section where you place it. I prefer XXXXXXX as X is standard width (unlike M and I) and it's easy to see how many Xs you will need for a given space.
I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displaying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plain text email will appear.
Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.
Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:
CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;
Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.
CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if it's supported in IE7 and FF3 though; I don't care about IE6 for this as its an admin function and no one will be running IE6 that will use this page).
Any other suggestions? Can this really be that hard?
edit: can't comment so more info. Yes at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.
is there no better way?
Try
selector {
word-wrap: break-word; /* IE>=5.5 */
white-space: pre; /* IE>=6 */
white-space: -moz-pre-wrap; /* For Fx<=2 */
white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}
Just replace all your hard line breaks with <br/> and put the text into a div with the desired width. You can do the same with spaces: Replace them with .
Be sure you do this after you escape the special characters into HTML, otherwise the are not interpreted but printed on the page.
Try replacing any double spaces with - which should work to make your look of double spaces come through.
Crack all those new line and hard enters out with <br />.
Style the text output to make it look like a fixed-width with the font-family:
font-family:monospace;
You may need to size it up properly, something smaller than the surrounding text, but that will give you the look of a PRE, and what a plain text email will look like.
Put it all in a DIV with a fixed with and that could be worth a look.
create a <pre></pre> tag or use something like
<p style="width:800px">
....
</p>
with fixed width, i think text are wrapped