I'm making a responsive website for a client using twitter bootstrap, which is responsive by default. However when the words get too long in a <h1> it doesn't fit the mobile sized browser.
What I would like to do is change "thisisaverylongword" into "thisisa-verylongword" with the final part on a new line.
Is there a simple way to do this, maybe with javascript? I'm thinking some condition like "if $word is wider than $body then" or something similar. Any tips will be very useful, gold star if the same code works for any word.
You could use the (experimental) CSS property hyphens:
h1 {
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
and specify the line break by using special unicode characters:
U+2010 (HYPHEN)
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
U+00AD (SHY)
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use to insert a soft hyphen.
Browser compatibilty
MDN reference
EDIT
As mentioned by #hustlerinc it might be needed to set word-break: break-all to make it work.
I've written a jQuery plugin that might fit this purpose quite well. Check out ellipsis.js. Using the following configuration should work:
$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})
I guess the advantage of doing it this way is that the users still may display the whole header on tap if they want to.
You can apparently achieve something like this with a bit of CSS, check out the text-overflow property. Perhaps that's the ticket for this case. No JS needed. :)
Can't you set the CSS property word-break to hyphenate?
example here
I think that you must do it by yourself.
With the function "split", you split your string into a table of words. Then, you can check all the words into a for.
Related
I am implementing a comment system in my website and I need to hide the text after exceeding 5 lines in a view width of 300px and show "Read more", I've tried doing so with string length but every character has a different width, for example 500 characters of "#" (at sign) in a view width of 300px will have more lines than 500 characters of "." (dot) in a view width of 300px and also the user might use a lot of carriage return, after a lot of headache I thought is was impossible, then I've went to YouTube to see if they solved this problem, and obviously they did!
So my question is how it possible? just guide me in the right direction and I'll do my research.
NOTE 1: 300px view width is just an example and can change.
NOTE 2: I am using PHP if that matters.
NOTE 3: I think JavaScript solutions can be fooled by users, but I am not sure.
NOTE 4: The only solution I can think of is using a reference for each character width based on the font in use, and use that to figure out how many lines they are in a specific view width, But isn't that too much work since there is a huge number of supported characters?
Thank you.
You can't reliably calculate how many lines there will be. It depends on too many factors, like the font, the browser and even the operating system.
Just use css to hide everything after x lines. I put together a quick example:
This class hides everything but the first 5 lines.
.truncated {
font-size: 1em;
line-height: 1.2em;
max-height: 6em;
overflow: hidden;
}
Then just add a button that removes that class using javascript.
https://jsfiddle.net/rmwu4sL1/
i have some div created with JS and mydiv.textContent="blahblahblahblahblahblah";
despite the fact mydiv have width set to 100px, string of text assigned to div keeps on going in one line and wont drop to other text. i am confused
In your css use
word-wrap: break-word;
If you want to make a string breakable into two lines and it contains no spaces, you need to insert suitable control characters or HTML tags that allow acceptable breaks, or maybe use automatic hyphenation. So this really depends on the kind of content you have; see my page on word breaks in HTML.
If the content is literally "blahblahblahblahblahblah" as a JavaScript string, make it "blah\xadblah\xadblah\xadblah\xadblah\xadblah". The notation \xad stands for U+00AD SOFT HYPHEN, which is treated as an invisible hyphenation hint.
Is there a way to have a block of text fit in a div and wrap mid word with a '-' inserted before the break.
Basically have the text wrap around the elem-ent like that. Then I can create a block of tex-t that will automatically wrap around to the be-ginning when the div id resized
The commenters are right. But for what its worth, this is probably the best you are going to get: http://jsfiddle.net/zB47k/
While waiting cross-browser native support for hyphenation one way could be:
http://code.google.com/p/hyphenator/
Or add soft-hyphens serverside (php):
http://phphyphenator.yellowgreen.de/
I have self used method of adding soft-hyphens in php (using the above library), because site is multi-language one and all language-related stuff occurs serverside.
if you don't absolutely need the '-' you can use word wrap
.wrap {word-wrap:break-word;}
<div class="wrap">dfkajdlkfjkadjfjadjfladjfkajdkjfkajdfad</div>
You could also use the new hyphens spec, but it has limited browser support:
http://caniuse.com/#feat=css-hyphens
-ms-hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens:auto;
I'm working on the latest version of my plugin, Textarea Line Counter (http://mostthingsweb.com/?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).
I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,
Looks like it depends on the browser, my Opera wraps also on e.g. + % ? $ / ( [ { } \ ° ! ¿
Safari/Chrome on ¿ ? too
(guess there are lots more)
Nice idea for a plugin. Fighting the accuracy issues is going to be a challenge.
There's not a universal catch all for the way textarea is going to handle a string (other than line breaks at spaces), or using word-wrap.
IE produced a break with . , () {} ?, but not with / * = +
In this example, textarea seems to have that "special" feeling like a td
Based on all your advice, I have created a solution. It is rather large, and in fact I think I will make it into a separate plugin, as well as including it in my Textarea Line Counter. It works like this:
Create a div to act as a container, and set the font to something monospaced (i.e. every character is the same width)
Create a span within the container, and place a single letter.
Take the width measurement of the span (which will be the width of the letter, once margins, padding, and some other CSS attributes are cloned)
Create another div within the container and clone its CSS attributes. Set it's width to be two times the width of the letter found in step 3, and record its height.
To test if a character will cause a wrap, set the text of the div to: A[some character]A. [some character] is a character you are trying to test.
Test the height of the div. If it is larger than the height found in step 4, the text has wrapped.
I'm looking forward to releasing this plugin. Thank you again for all your advice.
some browsers will break inside words if the word is longer than the col width,
otherwise they break on spaces.
I notice some browsers set this by default- you can, too in most bowsers with:
textarea{word-wrap: break-word}
you can be sure it is not set by using textarea{word-wrap: normal}
I'm looking for a technique (javascript, CSS, whatever ???) that will let me control the amount of a string that is displayed. The string is the result of a search (and therefore not initially known). A simple Character count approach is trivial, but not acceptable, as it needs to handle proportional fonts. In otherwords if I want to limit to say 70 pixels then the examples below show different character counts (9 and 15) both measuring the same:-
Welcome M...
Hi Iain if I've ...
If you look at Yahoo search results they are able to limit the length of title strings and add ellipsis on the end of long strings to indicate more.
(try site:loot.com wireless+keyboard+and+mouse to see an example of Yahoo achieving this)
Any Ideas?
Perhaps the CSS property overflow: hidden; can help you, in conjuntion with width.
Using a span with fixed width, overflow-x:hidden and white-space:nowrap would be a start.
To get the elipsis in a cross browser scenario will be difficult. IE has text-overflow:elipsis but that is non-standard. This is emulated with -o-text-overflow in Opera. However mozilla doesn't have this. The yahoo Javascript APIs handle this.
Yahoo does this server-side, the truncation and elipsis ('...') is returned in the HTML. Presumably this is done on a character count, and if thats not an option for you then server-side is out.
Other than overflow: hidden I'm not sure CSS can help you here. You could measure the width of the containing element using Javascript, and truncate the text based on that. This could be used in conjunctin with overflow:hidden; so the text elements don't just resize all of a sudden, but you may have to extract the text and add a temporary element onto the page somewhere to do the measurement. Depending on the number of elements to truncate this might not work very well.
Another slightly hacky option is to measure the width of an element containing the letter 'W', then do a character count and truncate if (char_count * width_of_w) > desired_width.
You can use text-wrap: none; to stop text wrapping onto new lines, although this is a CSS3 property and last I checked was only supported by IE (imagine my shock when I found that one out!).
For a cross-browser pure-CSS solution, take a look at Hedger Wang's text-overflow:ellipsis prototype, here:
http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php
In CSS: .class-name{
width: 5em;
white-space: nowrap;
text-overflow: ellipsis; }
Hope it can help you.