Cree unha caixa con desprazamento de texto usando CSS e HTML
Unha caixa de desprazamento de HTML é unha caixa que engade barras de desprazamento cara ao lado dereito e inferior cando os contidos da caixa son maiores que as dimensións da caixa. Noutras palabras, se ten unha caixa que pode encaixar en 50 palabras e ten texto de 200 palabras, unha caixa de desprazamento HTML colocará as barras de desprazamento para permitirche ver as 150 palabras adicionais. No HTML estándar que simplemente empuxaría o texto extra fóra da caixa.
Facer o deslizamento de HTML é bastante sinxelo. Só ten que definir o ancho e a altura do elemento que desexa desprazar e, a continuación, usar a propiedade de desbordamento de CSS para configurar como desexa que se produza o desprazamento.
Que facer con texto extra?
Cando teñas máis texto do que encaixará no espazo do teu deseño, tes algunhas opcións:
- Repita o texto de xeito que sexa máis curto e encaixará.
- Permitir que o texto flúa máis alá dos límites e agarde que o deseño poida flexionalo para soportalo.
- Cortar o texto onde se desborda.
- Engade barras de desprazamento (normalmente vertical para texto) para que o espazo se despraza para mostrar o texto extra.
A mellor opción adoita ser a última opción: crear unha caixa de texto de desprazamento. A continuación, aínda se pode ler texto extra, pero o seu deseño non se ve comprometido.
HTML e CSS para iso sería:
O desbordamento: auto; dille ao navegador que engada barras de desprazamento se son necesarias para evitar que o texto rebote os límites do div. Pero para que isto funcione, tamén precisa das propiedades de estilo de ancho e alto definidas no div, de maneira que haxa límites para rebosar.
Tamén pode cortar o texto cambiando o desbordamiento: auto; desbordar: oculto ;. Se deixas de lado a propiedade de desbordamento, o texto verificará os límites do div.
Pode engadir barras de desprazamento a máis que só texto
Se tes unha imaxe grande que desexa que se amose nun espazo máis pequeno, podes engadir barras de desprazamento ao redor da mesma forma que foses con texto.
Neste exemplo, a imaxe de 400x509 está dentro dun parágrafo 300x300.
As mesas poden beneficiarse das barras de desprazamento
As táboas longas de información poden resultar moi difíciles de ler con moita rapidez, pero colocándoas dentro dunha div de tamaño limitado e logo engadindo a propiedade de overflow, podes xerar táboas con moitos datos que non ocupan espazo extremo na túa páxina. .
O xeito máis doado é o mesmo que con imaxes e texto, só engade un div ao redor da táboa, estableza o ancho e a altura dese div e engade a propiedade de desbordamiento:
| Nome | Teléfono | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Unha cousa que acontece cando fai iso é unha barra de desprazamento horizontal xeralmente aparece porque o navegador asume que o cromo das barras de desprazamento está sobreposto á táboa. Hai moitas formas de solucionar isto a partir de cambiar o ancho da táboa e outros. Pero o meu favorito é simplemente desactivar o desprazamento horizontal co overflow-x da propiedade CSS 3. Só ten que engadir overflow-x: oculto; á div, e iso eliminará a barra de desprazamento horizontal. Asegúrese de probar isto, pois pode haber contido que desapareza. Firefox soporta o uso das etiquetas TBODY para overflowUnha característica moi agradable do navegador Firefox é que pode usar a propiedade de overflow nas etiquetas da táboa interna como tbody e thead ou tfoot. Isto significa que pode configurar as barras de desprazamento nos contidos da táboa e as celas de cabeceira quedan ancladas por encima delas. Isto só funciona en Firefox , que é moi malo, pero é unha boa característica se os teus lectores só usan Firefox. Busque este exemplo en Firefox para ver o que quero dicir.
|