Div 文本超出 DIV答案

【问题标题】：Div text is going out of DIVDiv 文本超出 DIV
【发布时间】：2018-01-31 16:04:31
【问题描述】：

我有以下一行代码，然后里面有几个文本框和按钮。

但是文本超出了 div。尝试了溢出属性，但没有帮助。

<div class ="row no-gutter">        
        <div class ="col-sm-12" style="margin:8px 0px 0px 0px;padding-left:8px;padding-right:8px;">                         
                <div class ="row">
                    <div class ="col-sm-6" style="margin:8px 0px 0px 0px;padding-left:30px;padding-right:30px;">
                        <div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >                                   
                                            <div class ="row">                                                                                  
                                                <div class ="col-sm-4 text-center" style="margin:2px 0px 0px 0px;padding-right:0px;">
                                                    <div class="form-control input-md" >
                                                        <input id="MainContent_chkLastCycle"  type="checkbox" name="ctl00$MainContent$chkLastCycle" />
                                                        End Day Production Re-set
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>                            
</div>

这是一个相同的小提琴：https://jsfiddle.net/2zfp3g4g/

【问题讨论】：

你能分享一下工作小提琴/sn-p吗？
@SuperUser，刚刚发布了小提琴链接
你必须共享编译代码，而不是 asp 代码，它在 fiddle 中不起作用
@SuperUser，刚刚发布了编译代码

标签： html css asp.net webforms bootstrap-4

【解决方案1】：

复选框似乎在display: block 中。也许如果你把它设置为display: inline 会解决它。

【讨论】：

【解决方案2】：

overflow:hidden 正在工作。您将溢出属性赋予复选框父 div。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
                   
<div class ="row no-gutter">        
        <div class ="col-sm-12" style="margin:8px 0px 0px 0px;padding-left:8px;padding-right:8px;">                         
                <div class ="row">
                    <div class ="col-sm-6" style="margin:8px 0px 0px 0px;padding-left:30px;padding-right:30px;">
                        <div id="MainContent_UpdatePanelCentrifugeSpinAndStep" >	                               
                                            <div class ="row">                                                                                  
                                                <div class ="col-sm-4 text-center" style="margin:2px 0px 0px 0px;padding-right:0px;">
                                                    <div class="form-control input-md" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >
                                                        <input id="MainContent_chkLastCycle"  type="checkbox" name="ctl00$MainContent$chkLastCycle" />
                                                        End Day Production Re-set
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>                            
</div>

【讨论】：

感谢 Ankita，但现在文字显示不正确，jsfiddle.net/1dspqdw1，它被截断了
非常感谢，你是怎么知道的？你有什么推荐的资源或书籍吗？
非常欢迎，我在任何资源或书籍中都找不到。我已经知道这是个问题，因为在form-control 中给出了height:34px。所以我给你height:auto，你的问题就解决了。