Trying to fit long word in to span - html

Question

Hello sorry for my bad english
I looking for answer on internet but it couldn't help me somehow maybe i just cant figure it out. I just need to fit those long word in button.
this is how it looks like now. I posted my code on jsfiddle below
Jsfiddle FIXED
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>
Hello its me i found my problem because there was white-space:nowrap in parent div so i cant fit any word in child elements
<div class="w3-display-middle w3-large w3-animate-opacity" id="divclick3" style="white-space:nowrap;">
buttons with spans
</div>
JSFIDDLE FIXED V.2
there is my broken js and i want to achieve all those 4 buttons in 1 line like this next to it

Answer 1

Just add
word-break: break-all;
to the .chkbox class.
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
word-break: break-all;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

Answer 2

Should be width:auto; instead of width:150px; inside .chkbox
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:auto;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

Answer 3

If you want to add more content with 150px width then you can enter valuable text instead of garbage value.
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>this is testing here this is testing here</span></label></button>

Answer 4

The only way I can think of is to use .chkbox span {word-break: break-word} - Read more here
You may be able to improve this with hyphenation as well.
I used this word
.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width: 150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}
.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
word-break: break-word;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></label></button>