调整页面大小时，单选按钮分成两行

Posted 2023-02-15

【中文标题】调整页面大小时，单选按钮分成两行

【英文标题】：radio button is splitting in two lines when resize the page

【发布时间】：2021-11-11 18:16:09

【问题描述】：

我的网页上有一个单选按钮列表。当我调整页面大小以使其更小时，单选按钮位于顶部，单选按钮的文本位于其下方。下面是我得到的截图：

当我调整屏幕大小时，我能否看到单选按钮和旁边的文本，并且文本出现在第二行而不是文本和单选按钮分开。

下面是我的代码：

    <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&#39;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>

我像这样修改了我的样式表，但仍然看到单选按钮和文本之间的中断：

    <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;?还是简单地使用一些真实的句子单词而不是一个不切实际的长字符串而不是我们的分词？

好吧，在我的实际应用中。我有一个真实的句子。我用真实的字符串修改了我上面的例子。

【参考方案1】：

使用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&#39;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>

【讨论】：

我试着把 word-wrap: break-word;和单词而不是一个长句子。我仍然分别获得单选按钮和文本。请看我上面的帖子。我修改了样式表

如果是 html，那么我会在 label 标记内使用 input 并使用 word-wrap: break-word; 解决上述问题

它会在网页上翻译成html。如果你愿意，我可以发布 html。

我在现实世界中有一条大线。我发布这个问题是因为这条线很大。

在我原来的问题中发布了 html。

【参考方案2】：

试试这个带有单选按钮的样式表，它会起作用：

<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>

当你运行它时你会看到这个：