CODEWITHSUNDEEP
htmlcss
Rumata
Rumata

Reputation: 1047

How to wrap text in multiple <span> containers without a line break?

How can I implement wrapping for the text in multiple containers?

I need the text to wrap smoothly, but instead, if the text in one span is too long it moves to the next line instead of wrapping. How can I make it wrap instead of inserting line breaks?

span {
  margin: 2px;
  border: 1px dotted #cccccc;
  padding: 4px 10px 4px 10px; 
    line-height: 1.8;
    word-wrap; normal;
    display: inline-block;
    
    }
div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc;
  width: 400px;
  word-wrap: break-word;

}
<div>
  <span>lalala</span>
  <span>lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala</span>
  <span>lalala lalala</span>
</div>

http://jsfiddle.net/tzje3bgq/1/

Upvotes: 0

Views: 414

Answers (1)

Tasos
Tasos

Reputation: 2036

How about this? Is this what you want to accomplish?

EDIT: Updated the answer based on @Temani Afif comment

span {
  margin: 2px;
  border: 1px dotted #cccccc;
  padding: 4px 10px 4px 10px; 
  line-height: 1.8;
  word-wrap; normal;
}
div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc;
  width: 400px;
  word-wrap: break-word;
}
<div>
  <span>lalala</span>
  <span>lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala</span>
  <span>lalala lalala</span>
</div>

Upvotes: 4

Related Questions