gpt4 book ai didi

html - 如何防止单选按钮与其标签之间出现换行符,同时仍允许在标签本身内出现换行符?

转载 作者:技术小花猫 更新时间:2023-10-29 12:06:05 24 4
gpt4 key购买 nike

我想确保单选按钮与其相邻标签的开头之间永远不会有换行符。但是,我希望标签中的文本 允许换行。这可能吗?您可以通过呈现以下 HTML 来查看我失败的尝试:

<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>

盒子需要固定宽度,所以长的内容需要换行,如下面的第一个盒子所示。如果有人试图发布一个长得离谱且没有任何空格的字符串,我们需要将其截断,而不是超出框的边缘——问题在第二个框中可见:

 <div class="box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>

<div class="box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>

<hr/>

所以我添加了“溢出:隐藏”,情况稍微好一些,但我仍然不喜欢第二个框在单选按钮和它的标签之间有一个换行符:

 <div class="chopped box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>

<div class="chopped box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>

<hr/>

如果我添加 ,单选按钮就在它们的标签旁边,因此无间距字符串现在看起来很完美。但是,这会破坏第一个字符串(带空格的字符串),因为它不再换行:

 <div class="chopped box">
<nobr>
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</nobr>
</div>
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</nobr>
</div>

</body>
</html>

最佳答案

首先,移动标签内的单选按钮。这增加了一个不错的功能,您可以通过单击文本来选择单选按钮。然后在文本周围添加一个跨度。

<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This is a really long string with no spaces</span>
</label>
</div>

<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
</label>
</div>

其次,将以下样式添加到您的 css:

label {
white-space:nowrap;
}

.wrappable {
white-space:normal;
}

标签上的空白样式防止了单选按钮和文本之间的换行,文本周围的跨度允许它在文本内换行。

关于html - 如何防止单选按钮与其标签之间出现换行符,同时仍允许在标签本身内出现换行符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/512695/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com