Question

我遇到了CSS问题。我试图阻止文本溢出页面。我在我的css代码中添加了宽度，但它无法正常工作。任何人都可以帮助我。

它正在做什么 http://gyazo.com/f209edf6240e3c167dfce0b8cc47c888

HTML代码

<div class="contents">
    <section>
        <div class="mt5"></div>
        <div class="adminNote">
            <?php
            foreach ($team->getTeamNotes($teamBaseData['id']) as $key => $note_Value){?>
            <div>
                <b><?=$note_Value['username']?> - <?=date('l F j, Y - g:i A T', $note_Value['created_date'])?></b> <?if(DELETE_ACCESS){?>- <a href="">Remove</a><?}?>
                <br />
                <span style="width: 100%"><?=$note_Value['body']?></span>
            </div>
            <hr>
            <?}?>
            <?if(EDIT_ACCESS){?>
             <script type='text/javascript'>
                function newTeamNote(){
                    var html = "<textarea class='form-control' id='teamNotesteam' name='teamNotesteam' style='width: 95%; height: 150px;'></textarea><br clear='all' />";
                    html += "<input class='btn btn-primary btn-center' type='submit' id='postTeamNote' name='postTeamNote' value='Submit Note' />";

                    $("#teamNote").fadeOut(250,function(){
                    $(this).html(html).fadeIn(250);
                    });
                }
            </script>
            <?}?>
        </div>
    </section>
</div>

CSS代码

.adminNote{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.adminNote div{
    margin-top: 2px;
    margin-left: 25px;
    overflow: hidden;
    white-space: normal; 
}

.adminNote span{
    width: 500px;
    white-space: normal; 
}
textarea.adminNote{
    width: 95%; 
    height: 150px !important;
    margin-top: 15px;
    resize: none;
}

提交到数据库的PHP代码

if(isset($_POST['postTeamNote'])){

    $staffNote = preg_replace("/\r\n|\r/", "<br>", $_POST['teamNotesteam']);
    $staffNote = trim($staffNote);
    $staffNote = $sql->real_escape_string($staffNote);

    $time = time();
    if(!empty($staffNote)){
        if($sql->query("INSERT INTO `team_notes` (`team_id`, `user_id`, `body`, `created_date`) VALUES ('$teamBaseData[id]', '".USER_ID."', '$staffNote', '$time')")){
            $_SESSION['meg'] = 'new_note';
            $logs->staffLog('Created Team Note - Team ID: '.$teamBaseData['id'].'', 'black');
            header('location: '.URL_CP.'team/view/'.$teamBaseData['id'].'');
        }
    }else{
        $_SESSION['meg'] = 'no_text';
    }
}

Answer 1

您是否尝试使用自动换行或分词？

自动换行：长行将在下一行继续，并设置为不＃34;中断＆＃34;。
判断信息（break-all）：强制单词＆＃34; break＆＃34;在边缘

我想如果你的DIV已经拥有，那么两个宽度中的一个可以帮助你完成CSS。

更新：在您的jsfiddle中，如果您添加 .adminNote span 自动换行：break-word; < / strong>文本被包装。

CSS宽度问题（页面溢出）

1 个答案: