试图填写长字以跨越

Question

对不起，我的英文不好

我在互联网上寻找答案，但它无法帮助我，也许我只是无法弄明白。我只需要在按钮中输入那些长字。  this is how it looks like now。我在下面的jsfiddle上发布了我的代码

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>

你好，我发现我的问题是因为在父div中有白色空间：nowrap所以我不能适应子元素中的任何单词

<div class="w3-display-middle w3-large w3-animate-opacity" id="divclick3" style="white-space:nowrap;">
buttons with spans 
</div>

JSFIDDLE FIXED V.2

有我破碎的js，我希望在它旁边的1行中实现所有这4个按钮

Answer 1

添加

word-break: break-all;

到.chkbox类。

.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

在width:auto;

中应该是width:150px;而不是.chkbox

＆＃13;

＆＃13;

.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;
}

＆＃13;

<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果要添加150px宽度的更多内容，则可以输入有价值的文本而不是垃圾值。

.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

我能想到的唯一方法是使用.chkbox span {word-break: break-word} - Read more here

您也可以使用连字符来改善这一点。

我使用了这个word

＆＃13;

＆＃13;

.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;
}

＆＃13;

<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></label></button>

＆＃13;

＆＃13;

＆＃13;