Question

是否可以将此复选框右侧的文本切换到新行，而不更改html的结构，是否有CSS解决方案或者可能使用JS ..？这是小提琴：https://jsfiddle.net/6svxtdsk/

<div class="checkbox">
  <label>
    <input type="hidden" name="name" value="">
    <input required="required" class="check" id="check" type="checkbox" name="name" value="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab magni, exercitationem minus aliquid sunt animi et odit, obcaecati consequatur distinctio. Alias consequuntur odio, soluta at reprehenderit nesciunt repudiandae fugit quae. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. At, consequuntur, modi! Esse at nesciunt officia voluptate ipsam sapiente provident enim magni, temporibus recusandae inventore doloremque rem quaerat soluta aut, nihil.
  </label>
</div>

Answer 1

如果我理解正确的话，显示：输入上的阻止就可以了。

.checkbox label input{
  display:block;
}

<div class="checkbox">
  <label>
    <input type="hidden" name="name" value="">
    <input required="required" class="check" id="check" type="checkbox" name="name" value="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab magni, exercitationem minus aliquid sunt animi et odit, obcaecati consequatur distinctio. Alias consequuntur odio, soluta at reprehenderit nesciunt repudiandae fugit quae. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. At, consequuntur, modi! Esse at nesciunt officia voluptate ipsam sapiente provident enim magni, temporibus recusandae inventore doloremque rem quaerat soluta aut, nihil.
  </label>
</div>

Answer 2

给这个css：

.checkbox label input {
  display: block;
}

.checkbox label input {
  display: block;
}

<div class="checkbox">
  <label>
    <input type="hidden" name="name" value="">
    <input required="required" class="check" id="check" type="checkbox" name="name" value="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab magni, exercitationem minus aliquid sunt animi et odit, obcaecati consequatur distinctio. Alias consequuntur odio, soluta at reprehenderit nesciunt repudiandae fugit quae. Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. At, consequuntur, modi! Esse at nesciunt officia voluptate ipsam sapiente provident enim magni, temporibus recusandae inventore doloremque rem quaerat soluta aut, nihil.
  </label>
</div>

在新行的复选框旁边显示文本

2 个答案: