Fundación CSS
Las utilidades de creación de prototipos facilitan la construcción de diseños de prototipos y la interfaz de usuario, es decir, ayuda a construir los prototipos codificados que se desarrollarán desde el principio. Cada Utilidad tiene un mixin, junto con las clases personalizadas o clases de intercambio para mixins, para producir un marcado más limpio. La clase Overflow se puede usar para recortar el contenido o administrar el contenido, lo que hará que la barra de desplazamiento muestre el contenido mientras el contenido se desborda del contenedor de nivel de bloque.
Clase de desbordamiento de utilidades de creación de prototipos CSS de Foundation:
- Para todos los lados:
- overflow-visible: esta clase permite que el desbordamiento sea completamente visible, no se recorta nada. Aunque, el desbordamiento se puede controlar para que sea visible en una dirección específica.
- overflow-hidden: esta clase permite que el desbordamiento se oculte por completo, todo el contenido adicional se recorta. El desbordamiento se puede ocultar en una dirección específica.
- overflow-scroll: esta clase agrega barras de desplazamiento al contenido, la parte adicional se recorta. Necesitamos ver esa parte adicional desplazándonos en las barras de desplazamiento. El desbordamiento se puede controlar para que se desplace en una dirección específica.
- Para eje horizontal:
- overflow-visible: esta clase se utiliza para recortar el desbordamiento para que sea visible en la dirección x.
- overflow-x-hidden: esta clase se usa para desbordar para ocultarse en la dirección x.
- overflow-x-scroll: el desbordamiento se puede controlar para que se desplace en la dirección x.
- Para eje vertical:
- overflow-y-visible: esta clase se usa para recortar el desbordamiento para que sea visible en la dirección y.
- overflow-y-hidden: esta clase se usa para desbordar y ocultarse en la dirección y.
- overflow-y-scroll: el desbordamiento se puede controlar para que se desplace en la dirección y.
Ejemplo 1: El siguiente ejemplo ilustra el uso del desplazamiento de desbordamiento, por lo que se agregan las barras de desplazamiento que se usan para navegar a las partes recortadas.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<title>
Foundation CSS Prototyping Utilities
</title>
<style>
h1 {
color: green;
}
div {
background-color: #90EE90;
height: 110px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Foundation CSS Prototyping Utilities Overflow
</h3>
<div class="width-50 float-center overflow-scroll">
Foundation CSS is an open-source and free front-end
framework that makes it easier for us to make responsive
web designs. It is a very advanced CSS framework and
it works on all devices imparting us a responsive grid
and HTML and CSS UI components, templates, etc.
It is also very sophisticated, flexible, and easily
customizable. The use of the Fastclick.js tool in
Foundation also gives us fast rendering on mobile
devices. It also allows us to have some optional
functionality provided by JavaScript Extensions.
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el uso de overflow-x-hidden , por lo que las barras de desplazamiento están solo en el eje y (eje horizontal).
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<title>
Foundation CSS Prototyping Utilities
</title>
<style>
h1 {
color: green;
}
div {
background-color: #90EE90;
height: 110px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Foundation CSS Prototyping Utilities Overflow
</h3>
<div class="width-50 float-center overflow-x-hidden">
Foundation CSS is an open-source and free front-end
framework that makes it easier for us to make responsive
web designs. It is a very advanced CSS framework and
it works on all devices imparting us a responsive grid
and HTML and CSS UI components, templates, etc.
It is also very sophisticated, flexible, and easily
customizable. The use of the Fastclick.js tool in
Foundation also gives us fast rendering on mobile
devices. It also allows us to have some optional
functionality provided by JavaScript Extensions.
</div>
</body>
</html>
Producción:
Referencia : https://get.foundation/sites/docs/prototyping-utilities.html#overflow
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA