我通过下拉列表中的ajax调用向用户显示通知，一切正常，但我的文本已经超出div，我尝试 word-wrap:break-word 但它无法正常工作 .
我尝试了很多方法来解决它，但无法找到解决方案，这是我的代码 .
在这里我不能使用ajax，所以我预定了值 .
$(document).ready(function() {
function notification_li(el) {
return '<a style="display:inline-flex;" href='+el.absolute_url+' class="dropdown-item notify-item">'
+'<img style="max-height:40px;margin-right:15px;" class="img-fluid rounded-circle" src='+el.by_img+'>'
+'<div style="width:70%; word-wrap:break-word;"><p style="word-wrap:break-word;">'+toTitleCase(el.by)+': '+toTitleCase(el.verb)+'- |'
+toTitleCase(el.title)+' |'
+'</p></div>'
+'<img style="max-height:45px;" class="img-fluid float-right" src='+el.img+'>'
+'</a>'
}
function toTitleCase(str) {
return str.replace(/(?:^|\s)\w/g, function(match) {
return match.toUpperCase();
});
}
$('#notification-drop').unbind().on('show.bs.dropdown', function () {
var dropMenu = $('#dropdownnotifyButton');
$('#ajax-notifications-container').empty()
el = {'title':'This is a long title for test adoijadhaiojdkoahdiuadjhiaudoadiuahdioajkadjkj',
'absolute_url':'www.google.com',
'by_img':'https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png',
'by':'Google','verb':'Check out my new developed website',
'img':'https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png'}
$('#ajax-notifications-container').append(notification_li(el))
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="btn-group" id="notification-drop">
<span type="button" class="notification-bell" data-url="{% url 'communications:get_notifications' %}" data-target="dropdownnotifyButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="img-fluid" src="{% static 'icons/baseline-notifications-24px.svg' %}" alt="">
<span>2 notifications</span>
</span>
<div style="max-width: 520px;" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownnotifyMenu" id="dropdownnotifyButton">
<h5 class="dropdown-header" style="text-transform:uppercase;">notifications</h5>
<div class="dropdown-divider"></div>
<div id="ajax-notifications-container" style="word-break: break-all;width: 520px;">
</div>
<div id="waitnotiload" style="display:block; text-align:center; padding: 50px;">
<img style="height:50px;" class="img-fluid" src="{% static 'loading/Rolling-1s-200px.gif' %}" alt="">
</div>
</div>
</div>
我希望通知容器有 max-width with 520px ，文本应该在70％区域，如果长则自动中断 .
3 回答
我在下面的代码段中添加了一个css属性："white-space: normal"到
<p>标记 .div样式被一些CSS覆盖，尝试规范化
white-space.冲突CSS Bootstrap类.dropdown-item
添加此CSS