This question already has answers here:
Truncating long strings with CSS: feasible yet?
(6 answers)
Closed 9 years ago.
I have some dynamic text (comes from a database) and I need to fit into a div
My div has a fixed size. However, when the text becomes too long, it breaks into two lines. I would like to put three dots at the end of longer texts to make them fit inside a single line.
For example: My really long text becomes My really lo...
I have committed several attempts, but basically all of them depend on counting characters. That is, whatsoever, not really fortunate, for characters do not have a fixed width. For example, a capital W is much wider than an small i
Therefore, I encounter two main problems with the character-counting approach:
If the text has many narrow characters, it gets cut and appended with ..., even if the text would actually fit on one line afore trimmed.
When the text contains many wide characters, it ends up on two lines even after I cut it to the maximum number of characters and append the dots.
Is there any solution here (JavaScript or CSS) that takes the actual width of the text into consideration, and not the number of characters?
Use these styles:
white-space: nowrap; /*keep text on one line */
overflow: hidden; /*prevent text from being shown outside the border */
text-overflow: ellipsis; /*cut off text with an ellipsis*/
Apart from ellipsis, I would suggest display the whole text on mouse hover using tooltip.
fiddle
I would suggest Trunk8
You can then make any text fit to the size of the div, it trims the text that would cause it to go beyond 1 line (options are available to set amount of lines allowed)
E.g
$('.truncate').trunk8();
You should look at css ellipsis : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
Related
I wrote a very simple jquery plugin that clamps lines of an element to a set number of lines. Basically all it does is take the font size, the line height, and an argument passed to the function for max-lines, then it sets a maxheight and css-overflow to hidden.
To be clear, this clamps the actual element with the text, not a containing element.
I am wondering the best way to add an ellipsis to the last shown space. Should I actually truncate the text, then add an ellipsis via regex? If so, whats the best way to truncate characters that aren't shown?
Any help would be appreciated.
There are already many questions about hyphenating words, but I couldn't find a question about hyphenate only when one word that is by it's own too long for one whole sentence.
example:
I like this to be intact (not trying to put the word "verlichtingssysteem" in the upper line with hyphenates)
So I don't want this:
But I want to have a word that doesn't fit the whole line/div/page is hyphenated. Otherwise I can't see the text in full as you can see below. (it cuts off the last 3 characters)
All the solutions I have seen before on other questions does hyphenate on both last 2 examples instead of only the last example.
So it needs only to hyphenate when a word by it's own width doesn't fit the whole div/page, so when you have two words it just needs to place the word on the next line instead of hyphenating.
I only have this word fall off screen problem on mobile. But an (soft) hyphenate messes up on other devices that have a bigger width as you can see on picture 2. So I only need it for one word that by it's own to big on one line.
I don't think I am the only one who has this desire?
you can use
It only breaks a word when it would overlap the content width.
use it like thistextisgettinglong = thistextisgettinglong
see this fiddle: http://jsfiddle.net/2r70mhnw/1/
you probably have to set the width of the container to 100%, that's all!
http://en.wikipedia.org/wiki/Soft_hyphen
In computing and typesetting, a soft hyphen (ISO 8859: 0xAD, Unicode U+00AD soft hyphen, HTML: ) or syllable hyphen (EBCDIC: 0xCA), abbreviated SHY, is a code point reserved in some coded character sets for the purpose of breaking words across lines by inserting visible hyphens.
In some cases using
/* using those two for compatibility reasons with old browsers */
overflow-wrap: break-word;
word-wrap: break-word;
could be a valid solution. Beside its probably not a good solution for text content, I found it really useful to use e.g. in navigations or titles.
It breaks only single words if this particular word does not fit into the line. While it does not add "-" and does no real hyphenation, though.
I've implemented something like this:
http://jsfiddle.net/DKs49/
<p>Here are some numbers: <span id="1">123234</span>. Cool huh?<p>
Then change the number dynamically:
setInterval(function () {document.getElementById('1').innerHTML = Math.random();},100);
However, I am not using a fixed-width font (as jsfiddle does)
When digits are added, I need the surrounding text to move (like its doing...) however, on my site, when the number of digits are the same, the surrounding text still wiggles based on the digit width (since not using a fixed-width font, 1 is narrower than 2).
Anybody know how to fix this? (Or can recommend a cross-platform fixed-width font that doesn't look like a typewriter...)
EDIT: Per the comment by #guffa turns out many fonts have fixed width digits. Rather than hassle with this, simplest route = choose a better font.
If you're okay with a fixed-width <span>:
p span {
display: inline-block;
width: 150px;
text-align: right;
}
http://jsfiddle.net/DKs49/4/
The text is not jumping around because of the digits having different width, it's jumping around because there are different numbers of digits.
If you for example get a random number like 0.7362924825642400 it will instead be displayed as 0.73629248256424, i.e. two digits shorter than the others. A number with a zero right after the decimal separator will be displayed using the same number of significant digits, so it will be longer than the others.
In most fonts the digits are still the same width, eventhough rest of the characters aren't. They are made that way so that the digits will line up when numbers are displayed in columns, without having to align every digit separately.
If you make the number of digits the same all the time, you will most likely see like me that the rest of the text is completely still: http://jsfiddle.net/Guffa/DKs49/8/
document.getElementById('1').innerHTML = String(Math.random()).substr(0,15);
As per the W3 specification:
'monospace' fixed-width fonts are
Andale Mono
Courier New
Courier
Lucidatypewriter
Fixed
monospace
I have a div with this CSS class:
.textodiv{ height:29px;overflow:hidden;}
The size of the text that appears is very variable. With the CSS above, it appears about 2 lines and hides the rest. So there you have it as I wanted.
The problem is that I want to put three dots at the end of the text being displayed to give the idea of continuity. But how how far the text is displayed?
I tried to limit the number of characters, but not as the font of fixed size and the line break changes according to the size of the words, this solution does not effective.
Any suggestions?
For a single line approach you can do this through CSS, add the following to your css rule:
text-overflow: ellipsis;
white-space: nowrap;
If you want multiple lines you will have to use a JavaScript approach, which can be found at:
Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?
I was wandering, is there a way to check how many lines will a text in a <p> tag occupy after beeng wrapped? I know the width & height of <div> that contains this <p>.
This question came up when I was trying to cut a text if it's more then 3 lines long, and make it expandable later. I know I can achieve this by cutting the text with fixed length (average symbol count in a line). But I was just wandering :)
you don't actually need to know how many pixels the text is long if you use relative units for font-size, line-height and height: see this fiddle - http://jsfiddle.net/6WRsg/
I set a line-height: 1.3 and height: 3.9em /* (1.3 * 3 lines) */; so no matter what the font-size is, you always display at most three lines of text.
When you need to show all the content just switch programmatically (via javascript) the height to auto
You could place the para temporarily miles outside the visible page with position:absolute, left:-2000px and then check its offsetHeight to get an idea of how many lines it will have. Not sure how you'd find exact line breaks tho.