How to limit text within a set padding/margin and move the remaining content to the next line?

Issue

I am trying to set the padding-left and padding-right only on the span subDataTitle element of 20px left and right. I want the text to move to a new line if the text is more than the padding. For instance, here is a diagram of what I am seeing: image .

As you can see, currently there isn't a 20px padding left and right on the diagram. When I set the padding, I am seeing the 20px space on the left but on the right, the padding is happening at the end of the "ABCDEFGHIJKLMNOP" text. Also the content is not moving to the next line. How can I fix this? This is what I am trying to achieve: expected output. There should be 20px spacing on both left and right side of the element.

<div class="DataBox">
    <div class="diagram">
        <h3 class="dataNumber">
            0000,000A
            <span class="subDataTitle">BQETFVXRBNTLDGBNCQIHTVHGHWEDSS ABCDEFGHIJKLMNOP</span>
        </h3>
    </div>
</div>

Styles:

.subDataTitle{
  padding-left: 20px;
  padding-right: 20px;
}

Solution

span tag has to be a block element. So, The subDataTitle class should have a width for the block. The text inside the span will be wrapped if we set a width size for the span element.

Now, the CSS of the subDataTitle class is like below,

.subDataTitle{
  display: block;
  width: 80px; // use size on your demand
  word-wrap: break-word;
}

MAGIC TRICK

Use only width: 75ch instead of width: 80px and word-wrap: break-word. You can wrapped the long texts easily. Special thanks to @Kiruna mentioned in comment.

Answered By - miltonbhowmick