Question

我有script 这是一个允许我通过Web编辑数据库表的脚本。一切都很完美，除非如果一个列有大字而没有空格，你可以看到，如果你打开我发布的脚本的链接，它就跳到它旁边的列... 我一直在搞乱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自动换行来分割那些非常大的单词：

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

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

Answer 2

您可以尝试将溢出设置为隐藏：

.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
    overflow: hidden;
}

如果设置了单元格的大小，这将切断任何额外的文本。如果您希望文本换行，您可以查看PHP wordwrap函数。

Answer 3

使用 css自动换行属性。

在您面临开箱即用文本问题的任何地方设置word-wrap: break-word;。

.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
    word-wrap: break-word;
}

文本跳出列

3 个答案: