CSS overlays and text-overlays in fieldsets
CSS Overlay and Text Overlay in Fieldset
In this article, we’ll explain how to use the HTML in the fieldset element. data-internallinksmanager029f6b8e52c=”10″ href=”https://geek-docs.com/css/css-top-articles/1000100_index.html” rel=”noopener” target=”_blank” title=”CSS Tutorial”>CSS’s overflow property and text-overflow property to adjust the style of the text that exceeds the limit.
Read more: CSS Tutorial
CSS Overflow Property
CSS The overflow property controls what happens when the content within an element exceeds its specified dimensions. The overflow attribute has the following optional values:
visible: Default value. If the content exceeds the limit, it will be displayed outside the element without being clipped.hidden: Exceeding the limit will be clipped and not displayed.scroll: Adds a scroll bar to facilitate viewing of the clipped content.auto: Automatically displays scroll bars as needed.inherit: Inherits the overflow property value from the parent element.
Here is an example where two fieldset elements use different overflow property values:
<!DOCTYPE html>
<html>
<head>
<style>
#fieldset1 {
width: 200px;
height: 150px;
overflow: hidden;
}
#fieldset2 {
width: 200px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<fieldset id="fieldset1">
<legend>Overflow: hidden</legend>
<p>This is a very long paragraph that exceeds the specified fieldset size. If the overflow property isn't set to hidden, the excess content will be visible. </p>
</fieldset>
<fieldset id="fieldset2">
<legend>Overflow: scroll</legend>
<p>This is another very long paragraph that exceeds the specified fieldset size. However, since the overflow property is set to scroll, a scroll bar is displayed. </p>
</fieldset>
</body>
</html>
In the code above, the content in the first fieldset element exceeds the specified size, but because overflow: hidden is set, the excess content is clipped and not displayed. The content in the second fieldset element also exceeds the specified dimensions, but because overflow: scroll is set, a scroll bar appears to help users view the excess content.
CSS Text-overflow Property
The CSS text-overflow property controls how text is displayed when it overflows its container. The text-overflow property has the following possible values:
clip: The default value. Clips any excess text and hides the clipped portion.ellipsis: Displays an ellipsis at the end of the clipped text.string: Customizes the content displayed at the end of the clipped text.
Here is an example of a fieldset element using the text-overflow property to adjust the style of text clipping:
<!DOCTYPE html>
<html>
<head>
<style>
#fieldset1 {
width: 200px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
#fieldset2 {
width: 200px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#fieldset3 {
width: 200px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: string;
}
</style>
</head>
<body>
<fieldset id="fieldset1">
<legend>Text-overflow: clip</legend>
<p>This is a very long sentence that exceeds the specified fieldset size. If the text-overflow property is not set, the excess will be hidden. </p>
</fieldset>
<fieldset id="fieldset2">
<legend>Text-overflow: ellipsis</legend>
<p>This is a very long sentence that exceeds the specified fieldset size. If text-overflow: ellipsis is set, the excess will be displayed as ellipsis. </p>
</fieldset>
<fieldset id="fieldset3">
<legend>Text-overflow: string</legend>
<p>This is a very long sentence that exceeds the specified fieldset size. By setting text-overflow: string, the excess text will display custom content. </p>
</fieldset>
</body>
</html>
In the code above, the text in the first fieldset element exceeds the specified size, but because text-overflow: clip is set, the excess text is clipped and the clipped text is hidden. The text in the second fieldset element also exceeds the specified size, but because text-overflow: ellipsis is set, an ellipsis is displayed, alerting the user to the clipped text. The text in the last fieldset element also exceeds the specified size, but because text-overflow: string is set, custom content is displayed.
Summary
In this article, we introduced how to use the overflow and text-overflow properties in HTML fieldset elements to style the overflow text and the text that overflows. By setting different property values, we can clip the excess text, display a scroll bar, or display an ellipsis or custom content. Mastering the use of these properties can bring better effects and user experience to our page design.