added text with append does not respect div

Asked

Viewed 117 times

2

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

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>'
 );

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

javascript jquery html css

  • Want the text to break down?

  • @Yes, I tried everything, it doesn’t break at all. If I put straight into html the text breaks but when I add with the append it gets that way there in the image.

  • send me a print of this so I can take a look

  • @ÐvÐ https://screenshots.firefoxusercontent.com/images/88d1fe08-8c28-4d79-b42e-aff5541dcd67.png

  • Let’s go continue this discussion in chat.

1 answer

1


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

In addition, put the style on the same selector vertical-align: top; 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>

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.