html - 文本跳出栏目

Question

我有这个script 这是一个允许我通过网络编辑数据库表的脚本。 一切都完美无缺，除了如果一个列有大字之间没有空格，你可以看到如果你打开我发布的脚本的链接，它会跳到它旁边的列上...... 我一直在弄乱 css 和脚本的整个代码，但无法修复这个问题......

这些都是我的代码...

我的 CSS 代码:

body{
    margin-top: 0px;
    margin-left: 0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
}
.dgError{
    margin-top:10px;
    margin-left:10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000000;
    background-color:#EFEFEF;
    border:5px double #C0C0C0;
    padding:5px;
}
.dgMainDiv{
    width:98%;

}
.dgTable{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:95%;
    width:100%;
    background-color:#FFFFFF;
}
.dgTitles{
    font-size:105%;
    font-weight:bold;
    background-color:#DCDCDC;
    border:1px solid;
    border-left-color:#ffffff;
    border-right-color:#aca899;
    border-top-color:#ece9d8;
    border-top-width:2px;
    border-bottom-color:#ece9d8;
}
.dgTitles:hover{
    border-top-color:#ffc83c;
}
.dgImgLink{
    cursor:pointer;
    padding:2px;
}
.dgImgLink:hover{
    background-color:#CCCCCC;
}
.dgHeader{
    font-size:110%;
    font-weight:bold;
    background-color:#C0C0C0;
    border:solid 1px #A0A0A0;
    height:30px;
}
.dgFooter{
    font-size:9px;
    background-color:#EFEFEF;
    color:#000000;
}
.dgPagRow{
    background:#EFEFEF;
    border-top:solid 1px #bfcacd;
    font-size:9px;
}
.dgBold{
    font-weight:bold;
}
.dgLinks{
    cursor:pointer;
    text-decoration:underline;
    color:#0000FF;
}
.dgLinks:hover{
    color:#FF0000;
}
.dgSelectpage{
    color:#000000;
    font-size:9px;
    font-weight:bold;
}
.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
}
.dgRowalt{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
}
.dgRowsnormTR, .dgspnormRow{
    height:20px;
    background-color:#ffffff;
    color:#000000;
}
.dgRowsnormTR:hover{
    background-color:#ffffe0;
}
.dgRowsaltTR, .dgspaltRow{
    height:20px;
    background-color:#e9eff2;
    color:#000000;
}
.dgRowsaltTR:hover{
    background-color:#ffffe0;
}
.dgspnormRow{
    font-weight:bold;
}
.dgspaltRow{
    font-weight:bold;
}
.dgAjax{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-color:#FFFFE1; 
    border-style: dotted; 
    border-width: 2px; 
    padding: 4px;
}
.dgArrows{
    width:5px; 
    height:15px;
}
.dgInput {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    border: 1px solid #6699FF; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-top: 1px; 
    padding-bottom: 1px;
}
.dgInput:focus{
    background-color: lightyellow;
}
.dgSearchDiv {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position: absolute; 
    width:300px; 
    height: 150px;
    background-color:#0a246a; 
    border:2px solid #0a246a;
    top:0; 
    z-index: 10000; 
    display:none; 
}
.dgInnerDiv {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-top:20px;
    background-color:#d9d9d9;
    font-size:100%;
    height:130px;
}
.dgSearchTit {
    width:270px; 
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    padding-left:10px;
    cursor:move;
    float:left;
}
.dgCheck{
    width: 17px;
    border: 1px solid #6699FF; 
}
.dgTotRowsTR{
    height:25px;
    background-color:#ece9d8;
    color:#000000;
    font-weight:bold;
}
.dgRowsTot{
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
}
.dgAddDiv{
    position:absolute; 
    top: 0px;
    left: 0px;

/* --- This options below produce an error in FF 3 --- */
/*
    opacity: .98; 
    -moz-opacity:0.98; 
*/
    color:#FFFFFF;
}
.dgAddTitle{
    background-color: #000099; 
    height:20px;
    font-weight:bold;
}
.dgAddNames{
    width: 200px;
    font-weight:bold;
}
.dgAddInputs{
    width: 180px;
}
.dgAddButons{
    height:30px;
    vertical-align:middle;
    background-color: #CCC; 
}

主页代码 = http://pastebin.com/44qgpeti

PHP 脚本代码 = http://pastebin.com/LqavqHdx

我发布了我的 css 和 script 以防问题不在 CSS 文件中...

所以我希望有人能帮我找到这个问题:)

Answer 1

您可以使用 CSS word-wrap 来拆分那些非常大的单词:

.dgRownorm {
    border-style: solid solid none;
    font-size: 100%;
    word-wrap: break-word;
}

您可以查看浏览器兼容性表here at MDN .