Question

开始我正在尝试记录聊天，并且有一些简单的时间阅读它（不一定非常漂亮）我已经用CSS完成了大部分工作，但我遇到了一个小问题，如果一个聊天行溢出，它将溢出到下一个聊天行

Text Overflow Issue

如果第二行溢出，我怎么能让第二行低于第一个文本？

我尝试过使用CSS标签“overflow：auto;”和“溢出：滚动;”但是两个只是将文本放在一行上，每个行都有滚动条溢出，这不是我想要的。

这是我的HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>

    <body>
    <ul class="chat-lines">
            <div class="chat-line">

                <span class="timestamp"><small><!--timestamp-->00:00</small></span>

                <span class="badges">
                </span>

                <span style="color: #ff0000" class="from">username</span>
                <span class="colon">:</span>&nbsp;

                <span class="message">message message message message message message message
                message message message message message message message message
                message message message message message message message message message
                message message message message message message message message message
                message message message message message message message message message
                message message message message message message </span>
            </div>
            <div class="chat-line">

                <span class="timestamp"><small><!--timestamp-->00:00</small></span>

                <span class="badges">
                </span>

                <span style="color: #ff0000" class="from">username</span>
                <span class="colon">:</span>&nbsp;

                <span class="message">message message message message message message message
                message message message message message message message message
                message message message message message message message message message
                message message message message message message message message message
                message message message message message message message message message
                message message message message message message </span>
            </div>
        </ul>
    </body>
</html>

和我的css.css文件

body
{
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    font-size: 13.33px;
    line-height: 17.33px;
    font: 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
    display: block;
    background: rgb(0,0,0)!important;   
}
.chat-lines
{
    color: rgb(211, 211, 211);
    display: block;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 17.33px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: 90%;
}
.chat-line
{
    -webkit-box-shadow: rgba(255, 255, 255, 0.0392157) 0px 1px 0px 0px inset;
    border-bottom-color: rgb(0, 0, 0);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-shadow: rgba(255, 255, 255, 0.0392157) 0px 1px 0px 0px inset;
    display: block;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 17px;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    width: 100%;
    word-break: break-word;
}
.chat-line:nth-child(2n)
{
  background-color:rgb(35,35,35);
}
.timestamp
{
    color: rgb(140,140,140);
    display: inline;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: auto;
}
.badges
{
    color: rgb(211,211,211);
    display: inline-block;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 19px;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: 23px;
}
.badges: after
{
    clear: both;
    display: block;
    font-size: 0px;
    height: 0px;
    visibility: hidden;
    width: 0px;
}
.from
{
    color: rgb(255, 57, 183);
    display: inline;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: auto;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-transform: none;
    width: auto;
}
.colon
{
    color: rgb(211, 211, 211);
    display: inline;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 2px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: auto;
}
wbr
{
    color: rgb(211, 211, 211);
    display: inline;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: auto;
}
.message
{
    color: rgb(211, 211, 211);
    display: inline;
    font-size: 13.5px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    line-height: 16px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: auto;
}

Answer 1

您将每个“聊天行”的高度设置为17px。如果内容溢出，这不会让元素的高度增加。而是使用min-height属性。

应该流到下一行的文本不会增加父框模型

1 个答案: