调整页面大小时，单选按钮分成两行
radio button is splitting in two lines when resize the page
我的网页上有一个单选按钮列表。当我调整页面大小时使其变小时，单选按钮出现在顶部，单选按钮的文本出现在它的正下方。下面是我得到的截图：
当我调整屏幕大小时，我能看到单选按钮和旁边的文本吗？文本出现在第二行，而不是单独的文本和单选按钮。
下面是我的代码：
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
word-break: break-all;
}
</style>
<asp:RadioButtonList CssClass="radioBL" ID="test" runat="server">
<asp:ListItem Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem Text="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
查看页面源代码时，上面的代码HTML如下：
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content" >
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
.test1{
word-break: break-all;
}
</style>
<table id="MainContent_test" class="radioBL test1">
<tr>
<td><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available." /><label for="MainContent_test_0">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</label></td>
</tr><tr>
<td><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." /><label for="MainContent_test_1">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</tr>
</table>
我像这样修改了我的样式 sheet，但仍然看到单选按钮和文本之间的中断：
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
label {
word-wrap: break-word;
}
</style>
<asp:RadioButtonList CssClass="radioBL label" ID="test" runat="server" >
<asp:ListItem CssClass="label" Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem CssClass="label" Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
使用 word-wrap: break-word; 可以让不可分割的单词在太大时被分割。
您可以使用 word-break: break-all;
实现相同的效果
label {
word-wrap: break-word;
}
<label for="html"> <input type="radio" id="html" name="fav_language" value="HTML"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</label>
这是您的 HTML 代码，用于解决您正在寻找但无法用 asp.net 方式提供帮助的问题，已粘贴以便您可以找到一些帮助
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content">
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
label {
word-break: break-all;
}
</style>
<table id="MainContent_test" class="radioBL test1">
<tr>
<td><label for="MainContent_test_0"><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."
/>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</label></td>
</tr>
<tr>
<td><label for="MainContent_test_1"><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
/>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</tr>
</table>
试试这个带有单选按钮的样式表，它会起作用：
<style type="text/css">
.radioBL input[type="radio"] {
margin-right: 10px;
word-break: break-all;
}
.radioBL label {
display: inline !important;
}
</style>
<asp:RadioButtonList CssClass="radioBL" ID="test" runat="server" >
<asp:ListItem CssClass="label" Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem CssClass="label" Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
当你运行它时你会看到这个：
我的网页上有一个单选按钮列表。当我调整页面大小时使其变小时，单选按钮出现在顶部，单选按钮的文本出现在它的正下方。下面是我得到的截图：
当我调整屏幕大小时，我能看到单选按钮和旁边的文本吗？文本出现在第二行，而不是单独的文本和单选按钮。
下面是我的代码：
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
word-break: break-all;
}
</style>
<asp:RadioButtonList CssClass="radioBL" ID="test" runat="server">
<asp:ListItem Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem Text="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
查看页面源代码时，上面的代码HTML如下：
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content" >
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
.test1{
word-break: break-all;
}
</style>
<table id="MainContent_test" class="radioBL test1">
<tr>
<td><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available." /><label for="MainContent_test_0">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</label></td>
</tr><tr>
<td><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." /><label for="MainContent_test_1">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</tr>
</table>
我像这样修改了我的样式 sheet，但仍然看到单选按钮和文本之间的中断：
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
label {
word-wrap: break-word;
}
</style>
<asp:RadioButtonList CssClass="radioBL label" ID="test" runat="server" >
<asp:ListItem CssClass="label" Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem CssClass="label" Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
使用 word-wrap: break-word; 可以让不可分割的单词在太大时被分割。
您可以使用 word-break: break-all;
label {
word-wrap: break-word;
}
<label for="html"> <input type="radio" id="html" name="fav_language" value="HTML"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</label>
这是您的 HTML 代码，用于解决您正在寻找但无法用 asp.net 方式提供帮助的问题，已粘贴以便您可以找到一些帮助
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container body-content">
<style>
.radioBL input[type="radio"] {
margin-right: 10px;
}
label {
word-break: break-all;
}
</style>
<table id="MainContent_test" class="radioBL test1">
<tr>
<td><label for="MainContent_test_0"><input id="MainContent_test_0" type="radio" name="ctl00$MainContent$test" value="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."
/>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</label></td>
</tr>
<tr>
<td><label for="MainContent_test_1"><input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
/>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</label></td>
</tr>
</table>
试试这个带有单选按钮的样式表，它会起作用：
<style type="text/css">
.radioBL input[type="radio"] {
margin-right: 10px;
word-break: break-all;
}
.radioBL label {
display: inline !important;
}
</style>
<asp:RadioButtonList CssClass="radioBL" ID="test" runat="server" >
<asp:ListItem CssClass="label" Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
<asp:ListItem CssClass="label" Text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>
</asp:RadioButtonList>
当你运行它时你会看到这个：