0

tengo un listado de elementos para generar los breadcrums y cuando algún elemento es muy largo (en la imagen, el Elemento1, Elemento2 y Elemento 3 están dentro de un li) pasa a tener 100% por lo que se coloca en una nueva línea.

introducir la descripción de la imagen aquí

Me gustaría saber si es posible con CSS colocar eso a continuación del elemento anterior a este y cuando cambie a la próxima línea que empiece desde el principio... con una captura me explico mejor con lo que quiero conseguir :D

introducir la descripción de la imagen aquí

He probado con display:inline para todos los elementos pero nada y, en realidad, no estoy seguro si es posible hacerlo.

Dejo el enlace de jsfiddle con el código por si queréis probar y el código aquí:

HTML

<ul class="breadcrumb">
  <li class="home" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <a itemprop="url" href="#" title="Go to Home Page">
      <span itemprop="title">Home</span>
    </a>
  </li>
  <li itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <a itemprop="url" href="#">
      <span itemprop="title">Shop</span>
    </a>
  </li>
  <li>
    <span itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <a itemprop="url" href="#">
        <span itemprop="title">Elemento número 1</span>
      </a>
    </span>, 
    <span itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <a itemprop="url" href="#">
        <span itemprop="title">Elemento número 2</span>
      </a>
    </span>, 
    <span itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <a itemprop="url" href="#">
        <span itemprop="title">Elemento número 3</span>
      </a>
    </span>
  </li>
  <li>Elemento final</li>
</ul>

Y CSS:

.breadcrumb {
  list-style: none;
  padding-left: 0;
}
.breadcrumb li {
  display: inline-block;
}
.breadcrumb li:after {
  content: ' - ';
  display: inline-block;
}

Gracias!

2
  • Mi pregunta es: ¿Necesitas obligatoriamente tener a los elementos número 1, número 2 y número 3 dentro del mismo li?
    – phpMyGuel
    el 3 sep. 2018 a las 10:38
  • @PHPMyguel en principio sí ya que estos se generan a partir de un código ya existente que no he creado yo y que no quiero perder tiempo en modificar
    – fcastillo
    el 3 sep. 2018 a las 11:10

1 respuesta 1

4

El problema que tienes es que el li con los 3 elementos es un solo objeto y se comporta como tal, tiene un tamaño fijo establecido por el total de sus componentes internos. Para solucionar tu actual problema solo tienes que modificar los atributos display:

display: inline-block; por display: inline; Ejemplo 1

Esto anterior soluciona tu problema, pero si lo quieres todo en una linea sin que te haga el salto de linea utiliza en la clase .breadcrumb la propiedad white-space: nowrap; para que no te separe en lineas cuando encuentre un espacio en blanco Ejemplo 2, el problema está en que te quepa todo el breadcrumb en el espacio que tienes disponible, en tu caso supongo que no es posible :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.