How to wrap html div text

Question

I don't know if the translation went well.

Fix the size of the div.

If it's outside of that range, I'd like to change the line.

(Two or three lines, etc.)

What code should I add in style?

style code

<style>
        .label {margin-bottom: 96px;}
        .label * {display: inline-block;vertical-align: top;}
        .label .left {background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat;display: inline-block;height: 24px;overflow: hidden;vertical-align: top;width: 7px;}
        .label .center {background: url(https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat-x;display: inline-block;height: 24px;font-size: 12px;line-height: 24px;}
        .label .right {background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") -1px 0  no-repeat;display: inline-block;height: 24px;overflow: hidden;width: 6px;}
    </style>

html code

var contents = []
          for(var i = 0; i < data.length; i++){
          var iwContent = '<div class ="label"><span class="left"></span><span class="center">'+ buslist[i].slice(2) + '</span><span class="right"></span></div>';
          contents.push(iwContent)
              }

Fix the size of the div.

If it's outside of that range, I'd like to change the line.
(Two or three lines, etc.)

Answer 1

If I understand you correctly you want to force the text to break so that it doesn't extend outside the container.

Try adding the following style to your css

 overflow-wrap: break-word;

The overflow-wrap style can also take values of "normal" and "anywhere" depending on how you want the lines broken.