如何使Bootstrap 4 popovers可滚动

Question

我看到了另一个这样的问题,但答案对我不起作用,我不知道为什么.当超过50px时,为什么我的popover内容不滚动？还有一个侧面问题:在我的变量'a'中,我的换行符不在popover中.谁知道为什么？

var a = "hello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n";
$(function() {
  $('[data-toggle="popover"]').popover()
});

$("#button1").attr('data-content', a);

.popover-content {
  height: 10px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<button id="button1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Hello">Click to toggle popover</button>

Answer 1

你的目标是错误的.正确的课程是popover-body:

.popover-body {
    height: 50px;
    overflow-y: auto;
    white-space:pre-wrap;
}

https://jsfiddle.net/gx27dbv3/