3

私はこのスクリプトを持っています 。これは、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を投稿しました...scriptCSS

だから、誰かがこの問題を見つけるのを手伝ってくれることを願っています:)

4

3 に答える 3

2

CSS word-wrap を使用して、非常に大きな単語を分割できます。

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

MDN でブラウザ互換性テーブルを確認できます。

于 2012-06-05T16:52:43.397 に答える
1

オーバーフローを非表示に設定してみてください:

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

セルのサイズが設定されている場合、これにより余分なテキストが切り取られます。wordwrap代わりにテキストを折り返す必要がある場合は、PHP関数を参照できます。

于 2012-06-05T16:54:38.477 に答える
0

css word-wrap プロパティを使用します。

word-wrap: break-word;ボックスのテキストの問題に直面している場合は、div css に設定します。

.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
    word-wrap: break-word;
}
于 2012-06-05T17:34:36.013 に答える