[英]CSS word-wrap property not working for label tag in Bootstrap
I have a quiz game setup on bootstrap. 我在引导程序上有一个问答游戏设置。 Here is the code:
这是代码:
<div class="col-md-12">
<div class="row">
<div class="col-md-12" style="padding-bottom:20px; text-align:center;">
<h1>4 . In the three stage theory of memory, the first stage is called short-term memory.</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_A">
<input type="radio" name="224" value="A" id="option_4_A"> TRUE </label>
</div>
<div class="col-md-6">
<label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_B">
<input type="radio" name="224" value="B" id="option_4_B"> FALSE </label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_C">
<input type="radio" name="224" value="C" id="option_4_C"> Partially True </label>
</div>
<div class="col-md-6">
<label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_D">
<input type="radio" name="224" value="D" id="option_4_D"> Partially False </label>
</div>
</div>
<hr>
<input type="button" name="next2" value="Next" id="nt" onclick="hideandshow('4','5') " class="btn btn-success">
<input type="hidden" value="3" name="game_id">
</div>
The problem is with the label. 问题出在标签上。 When the label text is longer than the width of the column, the text disappears.
当标签文本长于列的宽度时,该文本消失。 I want it to break automatically and continue in new line.
我希望它自动中断并继续换行。 I tried using
我尝试使用
<label class="btn btn-primary" style="font-size:25px; width:100%; word-wrap: break-word;" id="label_4_B">
But it doesn't seem to work with labels I believe. 但我认为它似乎不适用于标签。 Would be greatful if I can get help from this community.
如果能从这个社区获得帮助,那将是非常好的。 Thank You.
谢谢。
You need to override the white-space
property, which Bootstrap sets to nowrap
on .btn
: 你需要覆盖
white-space
属性,它引导设置为nowrap
上.btn
:
label.btn { white-space: initial; } .col-md-12 { width: 200px }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-12"> <div class="row"> <div class="col-md-12" style="padding-bottom:20px; text-align:center;"> <h1>4 . In the three stage theory of memory, the first stage is called short-term memory.</h1> </div> </div> <div class="row"> <div class="col-md-6"> <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_A"> <input type="radio" name="224" value="A" id="option_4_A"> TRUE </label> </div> <div class="col-md-6"> <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_B"> <input type="radio" name="224" value="B" id="option_4_B"> FALSE </label> </div> </div> <div class="row"> <div class="col-md-6"> <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_C"> <input type="radio" name="224" value="C" id="option_4_C"> Partially True </label> </div> <div class="col-md-6"> <label class="btn btn-primary" style="font-size:25px; width:100%;" id="label_4_D"> <input type="radio" name="224" value="D" id="option_4_D"> Partially False </label> </div> </div> <hr> <input type="button" name="next2" value="Next" id="nt" onclick="hideandshow('4','5') " class="btn btn-success"> <input type="hidden" value="3" name="game_id"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.