2

Tenho uma lista que seus elementos são adicionados com o append do jquery e o texto adicionado não respeita limites da div e nem da lista:

inserir a descrição da imagem aqui

css:

#list_arquivos{
  list-style:none;
}

#list_arquivos .arquivo{
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 10px;
  width: 100px;
}

#list_arquivos .nome_arquivo{
  width: 70px;
}

#list_arquivos img{
  border: 1px solid #ccc;
  padding: 20px;
}

html:

<div id="dropzone">
     <ul id="list_arquivos"></ul>
 </div>

javascript:

$("#list_arquivos").append(
      '<li class="arquivo">'+
      '<a href="#">'+
      '<img src="img/file_icons/'+dados.icon+'">' +
      '<p class="nome_arquivo">'+dados.nome_arquivo+'</p>'+
      '</a>'+
      '</li>'
 );

Quero que o texto abaixo da imagem, independente do seu tamanho, não ultrapasse os 100px que delimitei para a tag p onde ele fica.

5

1 Resposta 1

1

Inclua word-wrap: break-word; em #list_arquivos .arquivo{ para que palavras longas sejam quebradas para caber dentro da div. [Mais sobre o estilo]

Em adicional, coloque no mesmo seletor o estilo vertical-align: top; para alinhar as divs no topo.

#list_arquivos{
  list-style:none;
}

#list_arquivos .arquivo{
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 10px;
  width: 100px;
  word-wrap: break-word;
  vertical-align: top;
}

#list_arquivos .nome_arquivo{
  width: 70px;
}

#list_arquivos img{
  border: 1px solid #ccc;
  padding: 20px;
}
<div id="dropzone">
   <ul id="list_arquivos">
      <li class="arquivo">
         <a href="#">
            <img src="img/file_icons/">
            <p class="nome_arquivo">dvdvdvd d d dhhdsddsddssfddffdhd dh</p>
         </a>
      </li>
      <li class="arquivo">
         <a href="#">
            <img src="img/file_icons/">
            <p class="nome_arquivo">fddffdhd dh</p>
         </a>
      </li>
      <li class="arquivo">
         <a href="#">
            <img src="img/file_icons/">
            <p class="nome_arquivo">dvdvdvd d d dhhdsddsddssfddffdhd dh</p>
         </a>
      </li>
   </ul>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .