Link text is not respecting div boundaries

I am creating some html tags dynamically as below which contains some text and a link.

Javascript:

let message = 'some message here';
var linkInfo = step.Link;
let date = formatAMPM(new Date());
let linkUrl = url;

if((linkUrl !== undefined) && (linkUrl !== '')) {
    let tmpMsg = '<a href=' + linkUrl + '>' + linkUrl  + '</a>';
    message += '<br />' + tmpMsg;
}

let control = 
    '<li>' +
        '<div class="message-data macro">' +
            '<div class="text text-left">' +
                '<p>' + message + '</p>' +
                '<p> <small>' + date + '</small> </p>' +
            '</div>' +
        '</div>' +
    '</li>';

$('ul').append(control).scrollTop($('ul').prop('scrollHeight'));

CSS:

.macro {
  margin-bottom: 15px;
  width: 85%;
  border-radius: 5px;
  padding: 7px;
  display: flex;
}

.message-data {
  float: left;
  background: #fff;
}

.text > p:first-of-type {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}
.text > p {
  width: 100%;
  margin-top: 0;
  margin-bottom: auto;
  line-height: 13px;
  font-size: 13px;
}
.text > p:last-of-type {
  width: 100%;
  text-align: right;
  margin-bottom: -2px;
  margin-top: auto;
}
.text-left {
  float: left;
  padding-right: 10px;
  font-family: Arial;
}

Normal text is working fine and it is getting wrapped to the next line if it is crossing the div width but the link text is not getting wrapped to the next line if it is crossing the div width. Can any one please help me to solve this issue.

Answer

You’ll want to use word-break: break-all on your <a> tag:

.container {
  width: 100px;
  border: 1px solid #000;
}

.wrap {
  word-break: break-all;
}

<div class="container">
  <a href="#" class="wrap">https://stackoverflow.com/questions/64251641/link-text-is-not-respecting-div-boundaries</a>
</div>

Advertisement

Answer