I need to get ellipses left side for my project, i.e text starting should be overflown and end of the text should be seen . How can i get this , can u help here
The dots pick up the color from the font. .more { text-overflow: ellipsis; color: red; white-space: nowrap; overflow: hidden; } This CSS changes the text and the ellipsis to red.
The Pseudo elements are considered to be part of the containing element. As an example, in the case of p::after, the content value becomes new content inside the p element. It is a new text node but we can't target different text nodes with the events. event listeners are bound to element nodes. The whole paragraph gets the click event. If you use CSS positioning to put the "read more" text in the bottom right corner of the paragraph, then you can use the position of the click within the paragraph to see if it is in the general area of the "read more".
If you want a specific amount of text you can use the line height and multiply by the number of lines to calculate the height. There is no perfect way to do this with CSS. It is best when you are controlling the amount of text being added to the area and combine that with the CSS for the ellipsis.
@@SteveGriffith-Prof3ssorSt3v3 Very good question.....For this issue i set the container to overflow: hidden and i add a "..." ::after pseudo element at the bottom-right of my container. it works but if the content is not overflowed, if the container can contain the whole text i don't need the pseudo element anymore. So the question is....is there a way in javascript to know if an element contains a whole text or if the text is overflowed? I apology for any mistake or if you don't understand my explanations! thanks in advance....and as always....thanks for sharing and teaching!!
try this: p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 4; } my paragraph is in a div set to display: flex and flex-direction: column Every thing works fine. -webkit-line-clamp: 4; works only if display is set to -webkit-box or -webkit-inline-box and -webkit-box-orient set to vertical; Of course it doesn't work in internet explorer. i hope this is what you are looking for?
@@SteveGriffith-Prof3ssorSt3v3 this is very simple with -webkit-line-clamp and webkit-box. i give an exemple in the response i wrote to Shiva Ganapuram. if you know a lot about webkit options .....it would be great if you could make some tutorials about it
Useful thing to know about this method is that it only works on block-type of elements like or . If you'll try to set this on an , for example, it will not work. :)
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Awesome! Another useful tips from the master. Thank you
looove it, I can finish my presentation today thanks to this 😄😄
Very simple yet explained well. Thanks!
Awesome explanation. Very clear.
Cool. I'm like these quick tutorials.
I need to get ellipses left side for my project, i.e text starting should be overflown and end of the text should be seen . How can i get this , can u help here
wonderful, and well explained...wow
Super helpful video, thank you
thanks i forgot about the white-space: nowrap; property
Thank you. How do I color the three dots if my background is a darker color. I’ve changed the text color to white but it doesn’t color the three dots?
The dots pick up the color from the font.
.more {
text-overflow: ellipsis;
color: red;
white-space: nowrap;
overflow: hidden;
}
This CSS changes the text and the ellipsis to red.
And if i want multiple lines?
css-tricks.com/multi-line-truncation-with-pure-css/
Very useful, thanks a lot!
How can i make the ::before element clickable?
The Pseudo elements are considered to be part of the containing element. As an example, in the case of p::after, the content value becomes new content inside the p element. It is a new text node but we can't target different text nodes with the events. event listeners are bound to element nodes. The whole paragraph gets the click event.
If you use CSS positioning to put the "read more" text in the bottom right corner of the paragraph, then you can use the position of the click within the paragraph to see if it is in the general area of the "read more".
can we put 3 dots in the middle ?
There is a unicode ellipsis character that you can put anywhere with HTML but not with CSS
@@SteveGriffith-Prof3ssorSt3v3 Thank you for your reply :) do I need to do the string manipulation to truncate the text and insert the ellipsis ?
te amo wey, gracias :D
you just made up text of 6/7 lines to single line and ellipse, what u do if i want to display 3/4 line and ellipse
If you want a specific amount of text you can use the line height and multiply by the number of lines to calculate the height. There is no perfect way to do this with CSS. It is best when you are controlling the amount of text being added to the area and combine that with the CSS for the ellipsis.
@@SteveGriffith-Prof3ssorSt3v3 Very good question.....For this issue i set the container to overflow: hidden and i add a "..." ::after pseudo element at the bottom-right of my container. it works but if the content is not overflowed, if the container can contain the whole text i don't need the pseudo element anymore.
So the question is....is there a way in javascript to know if an element contains a whole text or if the text is overflowed?
I apology for any mistake or if you don't understand my explanations!
thanks in advance....and as always....thanks for sharing and teaching!!
try this:
p {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 4;
}
my paragraph is in a div set to display: flex and flex-direction: column
Every thing works fine.
-webkit-line-clamp: 4; works only if display is set to -webkit-box or -webkit-inline-box and -webkit-box-orient set to vertical;
Of course it doesn't work in internet explorer.
i hope this is what you are looking for?
@@SteveGriffith-Prof3ssorSt3v3 this is very simple with -webkit-line-clamp and webkit-box. i give an exemple in the response i wrote to Shiva Ganapuram.
if you know a lot about webkit options .....it would be great if you could make some tutorials about it
THANK YOU VERY MUCH I HOPE YOU FEELING WELL GOD BLESS YOU. YOU SHOW ME WHAT I NEED HEHE
cool, thx a lot!
Useful thing to know about this method is that it only works on block-type of elements like or . If you'll try to set this on an , for example, it will not work. :)
Yep, inline elements collapse to wrap tightly around their content.