- 44
- 195 270
Craig A. Bourne
United Kingdom
Приєднався 9 січ 2019
Helping new developers learn HTML + CSS + JavaScript.
CSS Ellipsis - Handling overflow and long text
► An ellipsis is a punctuation type represented by three dots, which signify a pause or an intentional omission of a word sentence or a whole section from some text.
We can create an ellipsis in CSS if we have text that is too long or in danger of overflowing its container.
While techniques like text wrapping, breaking and hyphenation offer similar ways to handle overflowing text, they could leave unsightly gaps of whitespace or break words in unsuitable places. In these scenarios, the ellipsis is a good alternative to manage overflow while showing that there is more to read.
► Timestamps:
0:00 Start
0:27 The ellipsis
0:52 Use of the ellipsis on social media platforms
2:16 How we implement the ellipsis with text-overflow
4:23 Making hidden text viewable on hover
5:21 End
► Get the code:
CodePen Start: codepen.io/craigabourne/pen/WNmQZqw
CodePen End: codepen.io/craigabourne/pen/NWJGvLE
► Links used in the video:
Text overflow with CSS Ellipsis: developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
CSS Text Wrapping, Breaking & Hyphens: ua-cam.com/video/GShZTwP0EF4/v-deo.html
► This video is part of the CSS for Absolute Beginners playlist: ua-cam.com/play/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR.html
► Social Media:
craigabourne
craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne
We can create an ellipsis in CSS if we have text that is too long or in danger of overflowing its container.
While techniques like text wrapping, breaking and hyphenation offer similar ways to handle overflowing text, they could leave unsightly gaps of whitespace or break words in unsuitable places. In these scenarios, the ellipsis is a good alternative to manage overflow while showing that there is more to read.
► Timestamps:
0:00 Start
0:27 The ellipsis
0:52 Use of the ellipsis on social media platforms
2:16 How we implement the ellipsis with text-overflow
4:23 Making hidden text viewable on hover
5:21 End
► Get the code:
CodePen Start: codepen.io/craigabourne/pen/WNmQZqw
CodePen End: codepen.io/craigabourne/pen/NWJGvLE
► Links used in the video:
Text overflow with CSS Ellipsis: developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
CSS Text Wrapping, Breaking & Hyphens: ua-cam.com/video/GShZTwP0EF4/v-deo.html
► This video is part of the CSS for Absolute Beginners playlist: ua-cam.com/play/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR.html
► Social Media:
craigabourne
craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne
Переглядів: 1 791
Відео
CSS Text Wrapping, Breaking & Hyphens
Переглядів 3,4 тис.Рік тому
► Timestamps: 0:00 Start 0:37 Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch 1:36 Managing overflow 2:22 Preventing overflow 3:30 Text wrapping with overflow-wrap 5:00 Breaking with word-break 6:01 The HTML Line Break Opportunity element 6:44 Hyphens 8:08 End ► Get the code: Start: codepen.io/craigabourne/pen/KKBaONb End: codepen.io/craigabourne/pen/mdjWbwv ► Useful links: CSS overf...
How to Use and Optimize Google Fonts
Переглядів 2,8 тис.2 роки тому
► When CSS2 became standard, it meant we could specify custom fonts, which changed how the web looked. But it was not until 2009 that custom fonts were widely supported by browsers. Today, websites can call on any font it has the right to use. If you have access to a font, then you can use it on your website. One option is to buy a license from a font marketplace. But this can get pretty expens...
CSS Text & Font Fundamentals
Переглядів 2,9 тис.2 роки тому
► One of the most common things you will do with CSS is work with text. The CSS properties we use to style text fall into one of two categories. These are Font Styles and Text Layout Styles. The Font style category concerns properties that affect a text's font. These include the font family that is applied, the font size and weight, and so on. Text layout styles affect the layout features of th...
vh, vw, vmin, vmax: How to use CSS Viewport Units
Переглядів 12 тис.2 роки тому
► We can define the viewport as the visible dimensions of the browser window in which your web page displays. Viewport units then, are those that size elements relative to the dimensions of the viewport. Viewport units include: - vw (viewport width) - vh (viewport height) - vmin (the viewport minimum) - vmax (the viewport maximum) ... and we will cover all of these in this video Viewport units ...
Ems & Rems: How to use CSS Units
Переглядів 2,5 тис.2 роки тому
► ems and rems are relative units. Properties with these units take their sizes from font sizes. Elements that have properties using the ems unit are sized relative to the parent element. Unless they are a non-typographic property like height, or width. Then they take their size from the font size of the element itself. ems are really useful for setting things like margins, padding, and border ...
Using CSS Units correctly: Pixels and Percentages
Переглядів 3,3 тис.2 роки тому
► Modern CSS units allow us to set the sizes of a whole host of CSS properties. There are a range of different measurement units like pixels, rems and ems, vh and vw, vmin, vmax, %, millimeters, inches, centimeters, points, quarter millimeters, and many others. There is no need to know all of these. Over the next few videos, we will look at which ones we should know, and in which circumstances ...
Mastering CSS Positioning Once and For All
Переглядів 9 тис.2 роки тому
► The CSS position property allows us to define where element boxes are going to reside on the webpage. This could be relative to their usual starting position, relative to parent element or ancestor elements, or relative to the viewport. The position property can have one of five main properties: - position: static; - position: relative; - position: absolute; - position: fixed; - position: sti...
Understanding the CSS Display Property - block, inline, & inline-block
Переглядів 8 тис.2 роки тому
► The display property is responsible for how an element appears on the page. The main display properties (which we will cover in this video) are: - block - inline - inline-block Elements with display: block occupy the horizontal space of their container, stretching the full width available to them. Their height is determined by what their content needs.They can accept height and width properti...
Mastering the CSS Box Model
Переглядів 4,1 тис.2 роки тому
► Every element on a web page is rendered by the browser as a box. Whether it's paragraph text, a heading, a button, a div, a span, a link, or an image, every single element on a web page is a box that is made up of several properties. To be able to create cohesive layouts, it is important to understand the properties associated with these boxes so we can manipulate them. We can make the boxes ...
CSS Specificity
Переглядів 2,1 тис.3 роки тому
► Specificity is how browsers decide which CSS property values are the most relevant to an element and will therefore be applied. If you have ever been in a situation where you have tried to apply a given style to an element and find that for some reason that it just won’t apply, it is most likely due to specificity. Somewhere in your stylesheet (or even in another stylesheet) you will have a m...
Understanding Inheritance in CSS
Переглядів 1,8 тис.3 роки тому
► Inheritance is the behavior through which some elements can inherit styles that are applied to ancestor elements, rather than directly to themselves. So if a font is applied to a div element, for example, then that same font is applied to all text inside the div. Including the text enclosed within child elements of that div. If we were unable to do this in CSS, and property values could not b...
How to Manipulate Content With CSS Pseudo-Elements
Переглядів 2,3 тис.3 роки тому
► Pseudo-elements insert phantom or fake elements into a document which allows us to achieve certain effects. They are added by attaching keywords to CSS selectors that we can then use to style specific parts of elements. We can create generated content and insert it before, or after the content of an element, or use pseudo-elements to style certain parts of the content of elements. Like the fi...
How to Use CSS Pseudo-Classes
Переглядів 1,8 тис.3 роки тому
► Pseudo-classes specify a unique state of the element that has been triggered due to user interaction. A common pseudo-class that we are all familiar with is the :hover. Our pages will usually be full of links and buttons for users to click, and we would ordinarily set separate styles that only come in to force when the user hovers their cursor over the element. This change in styles informs t...
Universal and Attribute Selectors in CSS
Переглядів 1,7 тис.3 роки тому
► In this video, we are going to look some more at advanced selectors by learning about attribute selectors and the universal selector The universal selector targets every element on the page from the body element down. The attribute selector targets elements based on attributes and values they possess. We can reference an attribute name like href, target, src, for example, or target elements w...
Adjacent and General Sibling Selectors in CSS
Переглядів 2,4 тис.3 роки тому
Adjacent and General Sibling Selectors in CSS
CSS Selector Basics - Element, Class, and ID
Переглядів 3,3 тис.3 роки тому
CSS Selector Basics - Element, Class, and ID
CSS Resets and Default Browser Styles
Переглядів 3,5 тис.3 роки тому
CSS Resets and Default Browser Styles
Project: Build a Landing Page (2/2)
Переглядів 2,2 тис.3 роки тому
Project: Build a Landing Page (2/2)
Project: Build a Landing Page (1/2)
Переглядів 4,9 тис.3 роки тому
Project: Build a Landing Page (1/2)
When to Use Semantic HTML Elements Instead of Divs
Переглядів 39 тис.3 роки тому
When to Use Semantic HTML Elements Instead of Divs
How to Use Classes and IDs Properly
Переглядів 3,4 тис.3 роки тому
How to Use Classes and IDs Properly
Add Video to Webpages with Video and iFrame Elements
Переглядів 13 тис.3 роки тому
Add Video to Webpages with Video and iFrame Elements
Form Inputs - Checkbox, Radio, and Submit Buttons
Переглядів 2,9 тис.3 роки тому
Form Inputs - Checkbox, Radio, and Submit Buttons
Form Inputs - Text, Email, and Password
Переглядів 2,2 тис.3 роки тому
Form Inputs - Text, Email, and Password
The section tag is not semantic if it doesn't have a aria-labelledby attribute linking to the heading via id
Mozilla say it is a semantic element: developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements
@craigabourne Yes, but it is always better to read the source: "w3 org WAI ARIA apg practices landmark-regions # htmlsectioningelements" (why am I not allowed to post links?). You can't argue that it is semantic and that helps improving the accessibility if it is not used correctly. Section is a "region when it has an accessible name using aria-labelledby or aria-label" otherwise it is treated exactly the same as a div => meaningless.
@@MC_DarkMaster The video (and playlist) is aimed at complete beginners that are new to web development. Talking about ARIA authoring practices and associated attributes would be completely inappropriate for the context. Ironically, it would make the topic less accessible to newcomers.
@craigabourne Well, I wrote it for other developers so that maybe someone would see it and pick it up so that the web would be more accessible to everyone
I appreciate your help. I watched your previous video as well and I now feel confident with Text and Word wrapping. Thank you. 😊
thank you so much
how are you doing that? 275 turning into 75 px ? how that is done....hope you reply
Uuuuu
Great video, I just subscribed, I'll definitely be checking out the channel for more
How about the css property text-wrap? I use text-wrap: balance , it's very helpful to arrange my paragraph nicely. But I think it has limits on number of lines.
Simply awesome
Hg😂🎉😢😅😅
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
Thanks 😮😮
Craig, I created an E-portfolio website to work as an electronic résumé for myself. I'm trying to figure out how to embed a video that plays immediately when people visit the site and the place of my photo and when the video is over, it reverts back to a photo of me. do you know how to do that or can you direct me on how to code that?
Semantic
I would not want to be charged with maintaining that gmail code. 😬
Thanks Craig, good explanation
Glad it was helpful!
Can't describe how much your channel is helping me learn this stuff
Good to hear Marcus! DM in on IG or X if you have any web dev struggles
Commenting for support. Great channel!
Much appreciated
Wow, I appreciate this lessons you are the best! God bless you!
Thank you! 😃
Great series
Thanks! Appreciate the kind words!
Love it
100th like! 👍
Legend!
bro i was looking for that for too long, it may seem easy but damn I choked so hard to find out. Thank you !
Great introduction Craig :)
Better than Udemy courses I've paid actual money for!
Superb mate 👍
Thanks! Really appreciate the kind words ❤️
Welcome back! I like your way of explaining things, so I was pretty bummed when you didn't update for a fairly long time. Looking forward to your JS teaching (after you're done with CSS, ofc)
Big WOO🎉❤😊
Do we apply the ellipsis direct to the link or to the container?
btw the channel is looking great with the new thumbnails 💅
Glad you like them!
The best explanations. When is JavaScript happening?
You're back! 😀
Yes I am!
Learn CSS: ua-cam.com/play/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR.html
This tutorial is the most understanding i haver ever watched. very much simplified.
Hi Craig, when will you be back?
Imminently! Have just restarted so the first new videos will be out at the start of January
@@craigabourne Great, exciting. Can wait for 1 year, you content is the king.
This is very helpful, thank you
thank you :)
Brilliant tutorial with very clearly explained and demonstrated examples, very useful. This is the best tutorial on the subject I have seen and helped me greatly. Many thanks!
✅
☑
I fell off for a bit and when I came back I couldn't find my Minim videos.. I started to panic, then realized you just changed to your name and let out a huge sigh of relief. Love your content bro and it's really been helping me learn html. Thank you for making this content, it's greatly appreciated! Finishing the burger webpage, then on to CSS!
✅
✅
☑
☑ remaining : line height and letter and word spacing
✅
Great video 🙌🏻
You just made my life easier.
Nice can't wait for more