Moreover, this feature is a combination of white-space: nowrap, overflow-x: hidden and text-overflow: ellipses, and you need to apply these properties to the text that you’ll like to truncate. These dots mean that there is more content beyond the summary. It’s a feature implemented in blogs, where the blog summary has three little dots at the end. You’ll find text truncation with ellipsis on blogs. Let’s see how CSS Overflow x works in each of them. The following are use cases where CSS overflow-x is of great help: There are specific use cases where CSS overflow-x stands out. You can tell from its name that it begins with Moz (the word Moz means Mozilla, the makers of the Firefox web browser). Also, at the time of writing, only Firefox supports it, so you won’t use it that often. Overflow-x: -moz-hidden-unscrollable works like overflow-x: clip. To make it work, change overflow-x: clip to overflow-x: hidden: Ĭonst button = document.getElementById(‘slide-button’) Ĭonst text_container = document.getElementById(‘text-container’) With overflow-x: clip in the CSS code, the programmatic scrolling will not work.
#Overflow css code#
What’s more, the tag links to a JavaScript file that contains code that implements programmatic scrolling. Compared to previous code examples, we’ve added a button and a tag to the HTML. Our next code example demonstrates this quite well. With overflow-x: clip, this feature will not work. This means that your users can see content hidden by overflow-x: hidden via JavaScript. The difference is overflow-x: clip forbids all scrolling, including programmatic scrolling. However, there is a big difference between overflow-x: clip and overflow-x: hidden. This means the web browser will hide any content that overflows. Overflow-x: clip is like overflow-x: hidden. The reason is that CSS overflow hidden will clip the content that overflows: When you run our next code example, you’ll see part of the text. Also, the web browser will not give you any scrollbars to view the hidden content. However, if the content fits, you won’t notice any changes in the layout. As a result, the web browser will hide the overflowed content. Overflow x hidden will clip the content that overflows. With overflow-x: scroll, you can scroll to view the overflowed content: In this scenario, the text cannot fit in its parent, as a result, it overflows its parent. We can see this in our next code example. The scroll bar becomes active when the element does not fit, and this will allow you to scroll to see the content. This means, if the content fits, you’ll observe a scroll bar that is not active. With this, the web browser displays scroll bars even if there is no clipped content. The overflow-x: scroll tells the web browser to clip the content if necessary. You can confirm this when you run the code in your web browser: The paragraph text did not fit, as a result, it’s rendered outside its parent. The following code example shows the behavior of CSS overflow visible. If there is other content on the horizontal line of the parent, the overflow content pushes them away. With overflow-x: visible, content that does not fit will render outside its parent. Tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod With overflow-x auto, the web browser adds a horizontal scroll bar at the bottom of its parent: This can make its width longer than its parent width. In our next code example, the text has white-space: nowrap. If not, the web browser will add a scroll bar that allows you to scroll to see the content. If the content can fit inside its parent, it will appear the same as overflow-x visible. The behavior of overflow-x: auto depends on your web browser. Let’s explore each one more closely using coding examples. The following are the CSS overflow options available with CSS overflow-x:
Also, Mozilla Firefox web browser supports a vendor-prefixed value. At the time of writing, CSS overflow-x accepts five values.
This is the combination of overflow-x and its set of acceptable values. Possible Options For CSS Overflow x: Coding Examples To Use With the horizontal scroll bars, you can scroll to see the content.Īll this is possible via a set of options that you can use with CSS overflow-x. The overflowing content can appear on the left and right edges, so you can clip it, or add horizontal scroll bars to the element.
Possible Options For CSS Overflow x: Coding Examples To UseĬSS overflow-x is a CSS property that allows you to show or hide the overflow content of an HTML block element.
0 kommentar(er)
