1. 首页
  2. 问答
  3. 如何防止宽度为100％的输入溢出？

如何防止宽度为100％的输入溢出？

2017-01-19 42 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

相关问题

 相关问题