how to fix html table that every word in td is going to be break if its overflow in append data ajax?

    function retrive_activity() {
$.ajax({
    method: "get",
    url: "/webmcr/retrieveactivity",
    success: function (response) {
        $.each(response.activitydata, function (key, i) {
            $('.activityData').append('<tr class="row-selectable">\
                <td class="activity_id">'+ i['activity_id'] + '</td>\
                <td style="word-break: break-all;">' + i['activity_date'] + '</td>\
                <td> <img src="'+ i['activity_image'] + '" style="height: 150px; width: 150px;"></td>\
                <td>' + i['activity_name'] + '</td>\
                <td>' + i['narrative'] + '</td>\
                <td>\
                    <button type="button" class="btn btn-link btn-sm editact"><i class="fa fa-edit" style="color: #4B49AC;"></i></button>\
                    <button type="button" class="btn btn-link btn-sm text-danger"><i class="fa fa-trash"></i></button>\
                </td>\
            </tr>');
        });
    }
});

}

I want to break every word in my table but the word-break didn’t work in my code

>Solution :

Add this code first in your each-function:

$.each(response.activitydata, function (key, i) {
  for (let key in i) {
    typeof i[key] === 'string' && (i[key] = i[key].replaceAll(' ', '<br>'));
  }

Since the variable i seems to be an object where you have text you want to insert in the table I loop through all properties and change the ones that are strings – replacing all white-spaces with <br>.