如何在 css 中设置跨度分词

Question

I am using the radio buttons but the label beside the radio button is too long for the fixed screen. So some part of text is not showing. I tried word-break:break-word but it doesnt work. Currently the code is

<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Comté Réserve PDO 36-42 Months Old 200g</span></label>

and it looks like

How to fix this? Thanks in advance

Answer 1

This one is easy. You can put a tag break <br> inside tag span to break the line.

Answer 2

You have two options in my opinion but there are a lot.

First One:

you can use flexbox if you know it's good otherwise you just need to put these below CSS in your ant-radio-wrapper class name.

.ant-radio-wrapper {
 display: flex;
 flex-wrap: wrap;
}

Second One:

You can resize your font size by default font size is 16px

.ant-radio-wrapper {
  font-size: 12px
}

Answer 3

The long answer is, there's something wrong with your layout. Normally a line of text in a span will break to a new line.

 .container{ width:200px; border:solid 2px #333; }

 <div class="container"> <label class="ant-radio-wrapper"> <span class="ant-radio"> <input type="radio" class="ant-radio-input" value="1"/> <span class="ant-radio-inner"></span> </span> <span>Comté Réserve PDO 36-42 Months Old 200g</span> </label> </div>

Answer 4

Use flexbox

 label { display: flex; /* for demo */ width: 200px; }

 <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Comté Réserve PDO 36-42 Months Old 200g</span></label>