I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.
The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.
Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.
Is there a nice way to achieve this instead of using a monospaced font?
Since you're using jQuery try these plugins:
http://dotdotdot.frebsite.nl/
https://pvdspek.github.com/jquery.autoellipsis/
https://github.com/theproductguy/ThreeDots
https://github.com/jjenzz/jquery.ellipsis
We can use css for this:
.truncate {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* for links */
}
Related
I'm trying to display 3 DOM elements in a row. The 1st and the 3rd ones are divs with constant width and height, the one in the middle is text and can grow. The height of 1 and 3 has to be equal to the height of a single line of text.
The problem begins when the text element grows long. I'd want like to display 1 before the first line of text and 3 right where the text ends.
The combination of two changes helped me to achieve this:
I set flex-wrap: wrap for parentContainer
.parentContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
I wrapped each word into its own <span>...</span>
Although this approach displays the elements correctly, I have two problems with it
Instead of using Unicode line breaking algorithm I have to break text into words myself. The text is not guaranteed to have any whitespaces, unfortunately.
Double mouse click only selects text within a single span instead of the entire text.
I wonder if there is a different approach to it that isn't prone to the issues described above?
I think the key to achieving this might be to use css to set the display property of the icons/divs to inline. You may have to play with sizes to get things how you want them but making the image an inline element allows you treat it as if it were just another word.
In this example, I linked an image to simulate your bounding elements.
img {
width: 30px;
aspect-ratio: 1;
display: inline;
vertical-align: middle;
}
<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> text text here text here more text here even more text here text here more text here even more text<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" />
I am working on a khmer site, I dont know the language, the words are too long. I am trying to fit them in div but they are over flowing. Is there a way that the part of word comes down automatically such that it fits in the div, and over flow part is in next line.
I dont know what to do with it, please help.
Find the image in the attachment
You should use the word-wrap property of CSS to force the text to stay inside div without overflowing.
word-wrap: break-word
See the DEMO here
Check without this property and with it to see the difference.
See if this works - word-wrap: break-word;
Use the word-wrap CSS property:
.mydiv {
word-wrap: break-word;
}
You can give the below CSS style to the div to prevent the div text from overflowing.
div {
word-wrap: break-word;
}
There is an CSS Attribute for "text overflow" inside HTML Objects
You can do somesthing like that to prevent an overflow by default.
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
reference at W3School
Please note that text-overflow property only occurs when the containers overflow property has the value hidden, scroll or auto.
If you want to warp the long words in multiple lines instead of just "cutting" them you may use "word-wrap: break-word;" which causes the Browser to split long words. (reference)
Please note that both specs are widely supported but very old browsers may ignore them. You can see details in the references.
Is there a way in css to make sure that a div or class is only one line of text, and if it runs over, append ellipses on it? I know that you can set the div/class to a certain height and overflow:hidden, but it looks strange for what I'm trying to do.
In the picture below you see that the div on the right is larger than the one on the left. If I can make the name of the song one line with ellipses, they will both be the same height. Anyone know how to accomplish this? P.S. I want a better way than doing something like $song = substr(0, 10, $song) in php... something hopefully possible with CSS.
Set a width on the container.
Set white-space: nowrap.
Set text-overflow: ellipsis.
Hide the overflow*
Demo: http://jsfiddle.net/jD99d/
.my-class-name {
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
overflow: hidden;
}
See https://developer.mozilla.org/en-US/docs/CSS/text-overflow
* Note that "This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden."
Have a text to output in div printed with not fixed-pitch font. This div height permit to print only 4 lines of text. Is it possible to track automatic browser word wrap, so I can find position in text, when it has reached 4 lines and to cut away next lines?
Any suggestions using Javascript manipulating with DOM or maybe text line length calculation with PHP help?
How about using overflow: hidden?
Say you had a font-size of 12px, and a line-height of 16px.
4 lines * 16px = 64px
.hide-extra-lines {
height: 64px;
overflow: hidden;
}
Is this what you're after?
1) You can measure the size of the text on the server and be reasonably accurate. I've done this with GDI+ on a Windows machine; not sure what OS or libraries you have access to.
2) You can use a monospace font on the client and detect when text will wrap based on width of the container and word length. Then, you can truncate the text.
3) You can not use a monospace font on the client, still make a guess using script, and use overflow: hidden to capture any text that overflows.
Lets say I have a Label, Button, or TextArea object, that contains some amount of text. The way that things work by default is that text put in these objects will automatically word wrap around to the next line. Is there a way to disable this? I am aware that the CSS attribute
overflow : hidden ;
will stop the scrollbar from showing up. But is there a way to stop the text from going to the next line?
I wish it to be the case that if I have a string that is "wider" than the object it is placed within, it will simply write out the string to the limit of what the object can contain, without wrapping it to the next line? Anyone have a way of doing this?
Thank you.
You can use the following css definition to achieve this:
<style type="text/css">
.element {
width:200px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="element">
This text will not wrap. Hamina hamina hamina hamina hamina.
</div>
This should prevent any text from wrapping to the next line. If the text exceeds the width of the element, it cuts off. If you are using webkit / explorer you will get a nifty ellipsis effect where the text cuts off (to suggest that there is more text than is visible).
Unfortunately firefox does not support ellipsis. But the text will still cut off and will not wrap.
I haven't tested this defintion with button or textarea elements - only with divs. But I see no reason it should not work. I leave it to you to experiment.