There is the following construction (generated without my participation):

<span class="class1"> <span class="class2"> <input type="checkbox" name="property[]" value="val1"> &nbsp; <span class="class3">ПояснСниС ΠΊ чСкбоксу</span> </span> </span>

It is necessary to remove the text wrapping around the checkbox so that it is like this: http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

The way from the link above would work if not interfering &nbsp; . Is there a way to handle this? Preferably clean CSS, without javascript.

enter image description here

2 answers 2

Option 1 set a negative upper indent for the size of the line height:

 input { display: block; width: 20px; /*Π·Π°Π΄Π°ΠΉΡ‚Π΅ своС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ */ float: left; } .class3 { display: block; overflow: hidden; margin-top: -16px; /*высота строки */ } 
 <span class="class1"> <span class="class2"> <input type="checkbox" name="property[]" value="val1"> &nbsp; <span class="class3">ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу</span> </span> </span>

Option 2 position: absolute to input :

 .class2 { position: relative; padding-left: 20px; display: block; } input { display: block; width: 20px; position: absolute; left: 0; top: 0; } 
 <span class="class1"> <span class="class2"> <input type="checkbox" name="property[]" value="val1"> &nbsp; <span class="class3">ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу</span> </span> </span>

Option 3 flex :

 .class2 { display: flex; } input { display: block; width: 20px; } 
 <span class="class1"> <span class="class2"> <input type="checkbox" name="property[]" value="val1"> &nbsp; <span class="class3">ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу ПояснСниС ΠΊ чСкбоксу</span> </span> </span>

  • Please see (by reference) what exactly I mean - user64675
  • I saw the link, specify what exactly !!! The image and below it the text or the image on the left, the text on the right ?! - HamSter
  • Changed the question, introduced clarifications - user64675
  • Corrected the answer, choose))) - HamSter
  • Thank you, the most suitable for me seems to be 2, but there the first line is indented (space) because of & nbsp; Is there no way to ignore it?) - user64675

 input{display: inline-block; float: left; width: 20%;} .class2{width: 400px;display: block;} .class3{display: inline-block;width: 77%; float:left} 
 <span class="class1"> <span class="class2"> <input type="checkbox" name="property[]" value="val1"> &nbsp; <span class="class3">ПояснСниС ΠΊ ΠΊ Ρ‡Π΅ΠΊΠ±ΠΎΠΊΡΡƒΠŸΠΎΡΡΠ½Π΅ Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊΠ± ΠΎΠΊΡΡƒΠŸΠΎΡΡΠ½ Π΅Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊ Π±ΠΎΠΊ ΡƒΠŸΠΎΡΡΠ½Π΅ Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊΠ±ΠΎΠΊ ΡƒΠŸΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊ Π±ΠΎΠΊΡΡƒΠŸ ояснСниС ΠΊ Ρ‡Π΅ΠΊΠ±ΠΎΠΊΡΡƒΠŸΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊΠ±ΠΎΠΊΡΡƒΠŸΠΎΡΡΠ½Π΅Π½ ΠΈΠ΅ ΠΊ Ρ‡Π΅ΠΊΠ±ΠΎΠΊΡΡƒΠŸΠΎΡΡΠ½ Π΅Π½ΠΈΠ΅ ΠΊ чСкбоксуclass2</span> </span> </span>

Like this?