Break the chain in Css, It leaves the Col-md

I have a row, which I separate in columns and each column I separate again, always in equal parts

The problem is that the span goes out of its cabbages and goes to the other extreme.

SCSS

.aggrid--units--detail-child {
  .center {
    text-align: center;
  }

  span {
    word-wrap: break-word;
  }
}

I leave an example of the Structure of the html.

Why the word-wrap: break-word; is not breaking my word? Thanks.

I edit to put more information:

This is the html output:

I have the row and inside the cabbages of 3 because I'm going to have 4 orange squares. Within each col, of 3, is your row to be able to split it into 2 (col-md-6)

code:

       let result = '<div class="row">';

        keys.forEach(key => {
          value = objects[key];
          content = value[0];
          childKey = Object.keys(content);

          result += '<div class="col-md-3 aggrid--units--detail-child">';

          childKey.forEach(childs => {
            result += '<div class="row">';
            if (childs !== 'name') {
              result += '<div class="col-md-6"><label>' + childs + '</label></div>';
            }

            switch (childs) {
              case 'a':
                result += '<div class="col-md-12 center"><strong>' + content[childs] + '</strong></div>';
                break;
              case 'b':
                result += '<div class="col-md-6"><a href="#" ><span>' + content[childs] + '</span></a></div>';
                break;
              case 'mcp':
                result += '<div class="icon col-md-6"><a href="#"><span>' + content[childs] + '</span></a></div>';
                break;
              case 'd':
                result += '<div class="avatar col-md-6"><span>' + content[childs] + '</span></div>';
                break;
              default:
                result += '<div class="col-md-6"><span>' + content[childs] + '</span></div>';
            }
            result += '</div>';
          });
          result += '</div>';
        });
        result += '</div>';