I am trying to word-wrap an email address within a div, where otherwise it would overflow because it's too long for the div's width.
I know this issue has been covered here before (e.g. this question), but read-on, because I cover all the possible solutions mentioned there and elsewhere.
None of the below solutions do exactly what I want:
CSS
"word-wrap: break-word".
Depending on the div's width, this breaks the email address at awkward places. e.g.
info#longemailaddress.co.u
k
Use a Soft Hyphen within the HTML:
This is really well supported, but renders a visible hyphen on the page, leading user to believe the email address has a hyphen in there:
info#long-
emailaddress.co.uk
Use a thinspace or zero-width space within the email address:
(thinspace)
(zero-width space)
Both of these insert extra characters (bummer if user copy-pastes)
Linebreaks...
<br />
... are out because, most of the time, the div is large enough to contain the email address on one line.
I guess I'm hoping for some ingenious way of doing this in HTML/CSS, perhaps making use of pseudo elements (e.g. :before / :after), or by using a soft hyphen but somehow hiding it with CSS in some clever way.
My site uses jquery, so I'll resort to that if I must, although I'd rather not include a whole hyphenation library just for this one little problem!
Answers on a postcard please. (Or, ideally here...)
You can clip the text and use a tooltip
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
What I do is on hover show the full text as tooltip or use the title attribute for tooltip.
<p class="email" title="long-email-address#mail.com">...</p>
Maybe you can try <wbr> instead of <br>
Unfortunately, this won't work in IE.
word-wrap:break-word is based on the width of the container you want to break the word in. It's not going to break it where you decide to. You are unfortunately out of luck unless you want to reduce the width of the div so that it breaks where you want.
The other solutions, as you've discovered, are inadequate for your needs. Additionally, using a "jQuery hyphenation library" probably won't fix your issue either because it'll just be injecting the characters, line breaks, or so on just as you tried. You end up with the same problem.
I don't mean any offense by this, but maybe it would be good to rethink the design, rather than work around the design? Robin's answer is a decent alternative, though you won't be able to select the email address without javascript.
Related
I have a div and a textarea exactly overlapped, I type in the textarea and that text is converted to spans that have varying text colors (syntax highlighting) and are then shown in the div, so it looks like you're typing in the div, but you're actually typing in the transparent textarea. At the moment I simply put a space between the spans where a space exists in the text input, but if I add more spaces in series it doesn't work (only one will show). So I tried using instead of spaces but I was surprised to find out the width of it is different from regular spaces. What is the point of then?
To the point, how can I add spaces that have the same width as regular spaces if doesn't?
And here's an example of what should be two exactly matching lines (but aren't).
<span>Hello</span> <span>World</span>
<span>Hello</span> <span>World</span>
Note: I'm using the font "FontinSmallCaps", it's possible that's the reason for the discrepancy, but I am not willing to do away with it. Would rather filter the user input to never have two consecutive spaces. Although that would be a last resort.
If anything is unclear or needs elaboration, let me know.
Thanks in advance!
Not exactly sure of your HTML structure, but whatever wraps the HTML you have shown could have white-space: pre set, then the spaces will all remain. No need to convert them.
<div style="white-space:pre"><span style="white-space: pre;">Hello</span> <span>World</span></div>
is Non-breaking space and the other is considered as normal string by browser. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word. are also non-collapsing, that's probably the most significant aspect of their use (at least, that's how I tend to use them, pad stuff out, quick and easy)
I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse.
big.ass.email#addre
ss-
is.extremely.lame.de
Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?
Here you can see a small example: http://jsfiddle.net/sbg8G/2/
Your best bet here would be to use <WBR> tag or character to introduce a soft-break wherever you wish. e.g.:
Demo: http://jsfiddle.net/abhitalks/sbg8G/15/
HTML:
...
<a href="big.ass.email#address-is.extremely.lame.de">
big.ass.email#address-is.extremely.lame.de
</a>
...
Here, is inserted after the "#" and after "-is" to cause a break at those points.
Important: word-wrap and word-break won't help you here.
Reason:
word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?
Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.
Note:
A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
hyphens should be able to do the trick along with:
hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before
But, this doesn't work currently as it should. Otherwise, a would have helped you out.
Note 2:
hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).
Credits: here, here, and here
Hello I have a similar issue and I solve it with:
overflow-wrap: break-word;
word-wrap: break-word;
Also you could check this:
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc
You can try using text-overflow:ellipsis;
overflow:hidden;
text-overflow:ellipsis;
http://jsfiddle.net/sbg8G/8/
I set up a webpage like the one detailed here: http://alistapart.com/article/holygrail
(An example can be found here: http://alistapart.com/d/holygrail/example_4.html)
My problem (which may sound contrived and if that bothers you, let's take this as a fun exercise in CSS) is that if you take out all the spaces and any other characters that allow a string to break, the text will overflow or get hidden behind the right column:
The ideal solution is to put an ellipsis whenever that happens so that the user knows that there's text being hidden. (Note that I don't want to force breaking between letters because the rest of the paragraph has normal-sized strings that should break on spaces or punctuation.)
I can't seem to get text-overflow to work anywhere. The best I can do, it seems, is to just apply overflow: hidden but that's a severely less-than-ideal solution.
Can anyone show me (using CSS only, hopefully. I'm not interested in doing text calculations in JavaScript) how I might be able to add an ellipsis for this particular problem?
Try this css
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
How do I put two spaces after every full stop in a paragraph using CSS?
Ah, the old "two-spaces-after-a-period" meme rears its ugly head again.
Two spaces after a period is something that pertains to the typewriter world, or the monospaced font world. We moved beyond it long ago, starting with TeX or even before. The point is not to have one or two space characters after a period, but to have a pleasing amount of space there. Algorithms like TeX go to great length to do so. The algorithms in modern web browsers are still primitive by comparison, but are starting to do better. Consider the following:
You'll see that the space after the period is (slightly) greater than the inter-word space, as it should be.
What about the case of justification? You'd hope the browser would put the extra space between sentences, in preference to putting it between words. And that's what happens:
Anyway, so you want more fine-grained control, to realize your own typographical vision on your web pages. The following has four characters between the sentences:
You could also use spaces of different widths from Unicode to get just the amount of space you want (see Wikipedia article).
So is there any way to do this automatically? CSS has a word-spacing property, but no sentence-spacing property (actually, it's not that easy to figure out what a "sentence" is, even in English, and less so in other languages). Of course, putting more spaces in your HTML is not going to do a thing, since HTML treats any run of white space as a single space. So you're going to have to write some code, or find a plug-in, which traverses the text in your page and inserts markup. Or, add a plug-in or something to your CMS to spit out code which is marked up appropriately. Your alternatives for doing so are:
Add or a combination of different-width Unicode spaces.
As another poster suggested, use span tags with margin.
As a variant on the above, use a <span class="sentence"> element, with a CSS rules like .sentence::after { content: "\2002"; }, where 2002 is the "en-space". This results in:
However, the bottom line is that the web is not a typographical environment, notwithstanding the many worthy efforts to nudge it in that direction. Depending on your goals, you might consider creating your documents in a high-end document preparation environment, and publishing them as PDFs, for example.
The two spaces concept after a sentence is not "ugly" - in fact, it's just the opposite. Because of modern font kerning as well as the variety of fonts that Web browsers now support, it's sometimes very difficult to determine if a sentence has ended or if there is simply a word that is abbreviated that requires a period, not to mention a look of constant run-on. With 'fat' letters beginning a sentence, such as an upper-case "W", it can appear as though there is actually no space at all. Adding an additional space after a sentence provides readers with clear breaks. However, I get it that it would be quite difficult to create CSS that could "understand" what a sentence is so that it would automatically insert an additional space after each.
You could put your full stop in a span-tag and give it some CSS attributes, like "margin-right: 5px;", if it's only the appearance you are looking for.
Can only be done if you put your full stop to a tag, like <span>. For example :
www<span>.</span>google<span>.</span>com
Then the css is :
span:after{
content : " "; /*two spaces*/
}
I have the following textarea in a table:
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.
Any ideas as to how to fix this in IE?
Apply the width to the td, not the table.
EDIT: #Emmett - the width could just as easily be applied via CSS.
td {
width: 300px;
}
produces the desired result. Or, if you're using jQuery, you could add the width through script:
$('textarea[width=100%]').parent('td').css('width', '300px');
Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.
#Peter Meyer, Jim Robert
I tried different overflow values, to no avail.
Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.
EDIT:
#dansays, seanb
Due to some awkward application-specific constraints, the width can only be applied to the table.
#travis
Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.
Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"
not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.
did you try...
overflow: hidden;
??
I'm not sure if it should be in the table of the textarea... experiment a bit
IE also supports the word-break CSS 3 property.
The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.
In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.
By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will try to fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode page for more.
I've run into this problem before. It's related to how HTML parses table and cell widths.
You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).
But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.
Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.
Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.
For solve this issue you use space in your text,and you too use this code
overflow:hidden
Give the width in pixels.this should work properly
or, how about:
overflow: scroll;
Edit:
I actually tested this. I think the behavior is such because the width is on the table, which I believe (I have nothing to back this up) I read long ago that the table width is a suggested width, but can be expanded to accommodate its content. Not sure. I know if you use a <DIV> rather than a table, it works. Additionally, if you apply the 300 pixel width to the containing <TD> element as opposed to the <TABLE> element, it works as well. Also, the overflow: scroll does nothing! :P
Nice, funky IE behavior, for sure!
Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;">
might want to play around with the overflow value