CSS如何使自动宽度属性忽略某些字段?

时间:2018-05-31 20:18:34

标签: html css html5 width

所以我有一个显示用户数据的应用程序,包含此数据的div具有自动宽度属性,因此文本不会分成多行。但现在我有一个问题,因为这个div也包含一个文本块。这显然应该超过一条规则。这导致div变得非常宽。这是我不想要的。我正在寻找一种解决方案,让CSS忽略这个特定的文本块。有没有人知道解决方案?

这是包含div

#GenerateInfo{
    overflow: scroll;

    position: fixed;
    top: 0;
    bottom: 0;
    right: 76%;
    margin: auto;
    width: auto;
    height: 65%;
    padding: 0;
    z-index: 100;

    font-size: 20px;
    text-align: left;

    -webkit-box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
    -moz-box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
    box-shadow: 6px 18px 30px 0px rgba(0,0,0,0.36);
}

HTML:

<div id="GenerateInfo" class="card">
    <div class="card-body">
        <h3>Information</h3><strong>name:</strong>
        <br>Name
        <hr> 
        <strong>Email:</strong><br>email@hotmail.nl<hr>
        <strong>message:</strong>
        <br>
        <span class="limit">rem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam u</span>
    </div>
</div>

抱歉图片中有荷兰语。 它应该是什么样子(即使它有一个很长的消息): this is what it should look like (even if it has a long message):

这就是它的样子: This is what it looks like:

0 个答案:

没有答案