javascript - Bootstrap 中的固定井尺寸

Question

我在页面上显示了一个文本循环，并带有一个循环循环的按钮。每次我单击按钮时，孔的大小都会发生变化，因为文本的长度不同，是否有一种方法可以设置孔的大小，以便每次单击时它保持固定，但同时仍然具有响应能力？

        <div class ="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>                
        </div>

function cycle() {
var randomNumber = Math.floor(Math.random() * (testimonials.length))
document.getElementById('quote').innerHTML = textimonals[randomNumber];
}
var testimonials = ["ex.", "ex.", "ex."]

Answer 1

您可以使用min-height，这样它就会保持在最小高度并具有响应能力。

function cycle() {
   var randomNumber = Math.floor(Math.random() *    (testimonials.length))
   document.getElementById('quote').innerHTML = testimonials[randomNumber];
}

var testimonials = ["ex.", "ex.", "ex.", "Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him."];

#quote {
  min-height: 50px;
}

<div class ="col-md-6">
            <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>                
</div>