added text with append does not respect div

Question

added text with append does not respect div

Navigation

#1 by (1 votes)

2

I have a list that its elements are added with the jquery append and the added text does not respect div and nor list boundaries:

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_arquivosimg{border:1pxsolid#ccc;padding:20px;}

html:

<divid="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>'
 );

I want the text below the image, regardless of its size, not to exceed the 100px I delimited for the p tag where it stands.

javascript html jquery css

asked by anonymous 10.12.2017 / 23:39

1 answer

Checkbox gets bugged MARK ALL -RETIRATE SELECTION -Special event; Bulma CSS ScrollDown Navbar

score 1 · Accepted Answer

Include word-wrap: break-word; in #list_arquivos .arquivo{ so that long words are broken to fit within div [ More about style]

In addition, put the vertical-align: top; style in the same selector to align the divs at the top.

#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>