Home esercizi css overflow

Esercizi Overflow CSS

Allenati nella gestione del contenuto in eccesso all’interno dei tuoi elementi HTML utilizzando le proprietà CSS di overflow. Focalizzati su come gestire il flusso dei contenuti in modo intuitivo e pratico.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno, il cui contenuto è più lungo del contenitore. Usa il CSS per nascondere il testo in eccesso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        width: 200px;
        height: 50px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con un contenuto più lungo rispetto al contenitore e
      verrà nascosto.
    </p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un'immagine all'interno, il cui dimensione è più grande del contenitore. Usa il CSS per fare in modo che l'immagine si adatti al contenitore e nascondere le parti in eccesso.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      img {
        width: 200px;
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" alt="Immagine di esempio" />
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per fare in modo che il contenitore mostri una barra di scorrimento solo quando il contenuto supera le dimensioni del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Questo è un paragrafo con un contenuto più lungo rispetto al contenitore
        e verrà visualizzata una barra di scorrimento.
      </p>
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un paragrafo all'interno, il cui contenuto è più lungo del contenitore. Usa il CSS per fare in modo che il testo venga mostrato su più righe, senza creare una barra di scorrimento.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      p {
        width: 200px;
        height: 50px;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con un contenuto più lungo rispetto al contenitore e
      il testo verrà mostrato su più righe senza barre di scorrimento.
    </p>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per fare in modo che gli elementi di lista vengano visualizzati su una sola riga con barre di scorrimento orizzontali.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      ul {
        width: 200px;
        height: 50px;
        overflow: auto;
        white-space: nowrap;
      }
      li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ul>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un'immagine all'interno. Usa il CSS per fare in modo che l'immagine venga ridimensionata per adattarsi al contenitore, senza deformarsi.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="image.jpg" alt="Immagine di esempio" />
    </div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per fare in modo che il testo venga troncato e sostituito con puntini di sospensione quando supera le dimensioni del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      p {
        width: 200px;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con un contenuto più lungo rispetto al contenitore e
      il testo verrà troncato con puntini di sospensione.
    </p>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un'immagine all'interno. Usa il CSS per fare in modo che l'immagine venga mostrata su più colonne quando supera le dimensioni del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        overflow: hidden;
        column-count: 2;
      }
      img {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="image.jpg" alt="Immagine di esempio" />
    </div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un paragrafo all'interno, il cui contenuto è più lungo del contenitore. Usa il CSS per fare in modo che il testo possa essere scritto verticalmente quando supera le dimensioni del contenitore.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      p {
        width: 100px;
        height: 50px;
        overflow: auto;
        writing-mode: vertical-rl;
      }
    </style>
  </head>
  <body>
    <p>
      Questo è un paragrafo con un contenuto più lungo rispetto al contenitore e
      il testo verrà scritto verticalmente.
    </p>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un div all'interno. Usa il CSS per fare in modo che il contenitore mostri una barra di scorrimento solo quando il contenuto supera le dimensioni del div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Questo è un paragrafo con un contenuto più lungo rispetto al contenitore
        e verrà visualizzata una barra di scorrimento solo quando necessario.
      </p>
    </div>
  </body>
</html>