链接文本不尊重div边界

Question

我正在动态创建一些html标记，如下所示，其中包含一些文本和一个链接。

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;
}

普通文本工作正常，如果它越过div宽度，它将被换行到下一行，但如果链接文本超过div宽度，则不会被换行到另一行。有谁能帮我解决这个问题吗。

Answer 1

您需要在<a>标签上使用word-break: break-all：

.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>