Question

我正在通过下拉列表中的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％的区域（如果自动中断时间较长）。

Answer 1

我在下面的代码段的<p>标记中添加了一个另外的css属性：“空白：正常”。

$(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="white-space: normal;word-wrap:break-word;">'+toTitleCase(el.by)+': '+toTitleCase(el.verb)+'- |'
                +toTitleCase(el.title)+' |'
                +'</p></div>'
                 +'</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">

    </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>

Answer 2

冲突CSS引导程序类.dropdown-item

添加此CSS

#ajax-notifications-container .dropdown-item{
white-space: inherit;
}

Answer 3

div样式被某些CSS覆盖，请尝试规范white-space。

white-space: normal;

用js生成时文本从div中消失

3 个答案: