1. 首頁
  2. 問答
  3. 如何防止寬度爲100％的輸入溢出？

如何防止寬度爲100％的輸入溢出？

2017-01-19 43 views
1

我遇到問題。如何防止寬度爲100％的輸入溢出？

我有一組顯示像一個表格，它有一個行和3列的div。

這些div在達到768px的最大寬度時會作出響應，第1列將被隱藏，第2列和第3列將保留，並且將具有輸入文本。該輸入文本將有一個標籤，該標籤將顯示爲內嵌文本。

我的問題是輸入有一個100％的CSS，但輸入的文本超出了表格的範圍。

下面的代碼

/* DivTable.com */ 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.divTable{ 
 
\t display: table; 
 
\t width: 100%; 
 
} 
 
.divTableRow { 
 
\t display: table-row; 
 
} 
 
.divTableHeading { 
 
\t background-color: #EEE; 
 
\t display: table-header-group; 
 
} 
 
.divTableCell, .divTableHead { 
 
\t border: 1px solid #999999; 
 
\t display: table-cell; 
 
\t padding: 3px 10px; 
 
} 
 
.divTableHeading { 
 
\t background-color: #EEE; 
 
\t display: table-header-group; 
 
\t font-weight: bold; 
 
} 
 
.divTableFoot { 
 
\t background-color: #EEE; 
 
\t display: table-footer-group; 
 
\t font-weight: bold; 
 
} 
 
.divTableBody { 
 
\t display: table-row-group; 
 
} 
 

 
.form-control { 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
} 
 

 
    
 
@media (max-width: 768px) { 
 
     .hide1 { 
 
     display:none; 
 
     } 
 
     
 
     .force-display { 
 
     display:block; 
 
     } 
 
     
 
     .forcew { 
 
     white-space:nowrap; 
 
     } 
 
    }
<div class="divTable" style="width: 100%;border: 1px solid #000;" > 
 
<div class="divTableBody"> 
 
<div class="divTableRow"> 
 
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div> 
 
    <div class="divTableCell force-display"> 
 
    <div class="forcew"> 
 
      <label>First Name:</label> 
 
     <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
    </div> 
 

 
    </div> 
 
    <div class="divTableCell force-display"> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

這裏的小提琴： https://jsfiddle.net/bt6hrc4h/

來源

2017-01-19 Jemai

+0

與溢出隱藏包裝在一個div！ – Gacci

回答

0

您應該計算使用calc()函數首先輸入文本的寬度;

.forcew input { 
    width: calc(100% - 80px); 
} 


/* DivTable.com */ 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.divTable{ 
 
\t display: table; 
 
\t width: 100%; 
 
} 
 
.divTableRow { 
 
\t display: table-row; 
 
} 
 
.divTableHeading { 
 
\t background-color: #EEE; 
 
\t display: table-header-group; 
 
} 
 
.divTableCell, .divTableHead { 
 
\t border: 1px solid #999999; 
 
\t display: table-cell; 
 
\t padding: 3px 10px; 
 
} 
 
.divTableHeading { 
 
\t background-color: #EEE; 
 
\t display: table-header-group; 
 
\t font-weight: bold; 
 
} 
 
.divTableFoot { 
 
\t background-color: #EEE; 
 
\t display: table-footer-group; 
 
\t font-weight: bold; 
 
} 
 
.divTableBody { 
 
\t display: table-row-group; 
 
} 
 

 
.form-control { 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
} 
 

 
.forcew input { 
 
    width: calc(100% - 80px); 
 
} 
 

 
    
 
@media (max-width: 768px) { 
 
     .hide1 { 
 
     display:none; 
 
     } 
 
     
 
     .force-display { 
 
     display:block; 
 
     } 
 
     
 
     .forcew { 
 
     white-space:nowrap; 
 
     } 
 
    }
<div class="divTable" style="width: 100%;border: 1px solid #000;" > 
 
<div class="divTableBody"> 
 
<div class="divTableRow"> 
 
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div> 
 
    <div class="divTableCell force-display"> 
 
    <div class="forcew"> 
 
      <label>First Name:</label> 
 
     <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
    </div> 
 

 
    </div> 
 
    <div class="divTableCell force-display"> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>

來源

2017-01-19 07:29:08

1

如果flexbox是一個選項，一個簡單的修復將讓你forcew是一個flexbox - 添加到您的風格：

.forcew { 
    display: flex; 
    align-items: center; 
}

參見下面的演示：

/* DivTable.com */ 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.divTable { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.divTableRow { 
 
    display: table-row; 
 
} 
 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
} 
 
.divTableCell, 
 
.divTableHead { 
 
    border: 1px solid #999999; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
} 
 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
    font-weight: bold; 
 
} 
 
.divTableFoot { 
 
    background-color: #EEE; 
 
    display: table-footer-group; 
 
    font-weight: bold; 
 
} 
 
.divTableBody { 
 
    display: table-row-group; 
 
} 
 
.form-control { 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
} 
 
.forcew { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
@media (max-width: 768px) { 
 
    .hide1 { 
 
    display: none; 
 
    } 
 
    .force-display { 
 
    display: block; 
 
    } 
 
    .forcew { 
 
    white-space: nowrap; 
 
    } 
 
}
<div class="divTable" style="width: 100%;border: 1px solid #000;"> 
 
    <div class="divTableBody"> 
 
    <div class="divTableRow"> 
 
     <div class="divTableCell hide1"> 
 
     <p class="f-bold override" style="">First Name:</p> 
 
     </div> 
 
     <div class="divTableCell force-display"> 
 
     <div class="forcew"> 
 
      <label>First Name:</label> 
 
      <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
     </div> 
 

 
     </div> 
 
     <div class="divTableCell force-display"> 
 
     <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-01-19 07:29:42 kukkuz

+0

@Jemai讓我知道你的想法，謝謝！ – kukkuz

+0

我現在不在辦公室，但我會嘗試。謝謝您的幫助。 – Jemai

+1

謝謝你的工作！ – Jemai

0

添加此值

.forcew { 
    display: flex; 
    align-items: center; 
}

來源

2017-01-19 07:30:14 grinmax

相關問題

 相關問題