調整頁面大小時，單選按鈕被分成兩行

我在我的網頁上有一個單選按鈕串列。當我調整頁面大小使其變小時，單選按鈕出現在上面，而單選按鈕的文本就在它的下面。下面是我得到的截圖：

當我調整螢屏大小時，我可以看到單選按鈕和它旁邊的文本，并且文本來到了第二行，而不是文本和單選按鈕分開。

下面是我的代碼：

下面是我查看頁面原始碼時上述代碼的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"/span>] { 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是一個占位符文本，通常用于展示檔案或字體的視覺形式，而不依賴有意義的內容。Lorem ipsum可以在最終副本出來之前作為占位符使用。 " /><label for="MainContent_test_0"/span>> 在出版和平面設計中，Lorem ipsum是一種占位符文本，通常用于展示檔案或字體的視覺形式，而不依靠有意義的內容。Lorem ipsum可以在最終副本出來之前作為占位符使用。</label></td>> </tr><tr> <td>< input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value=" 自15世紀以來，Lorem Ipsum一直是業界&#39;的標準假文本，當時一位不知名的印刷商拿著一排排的字體，爭先恐后地做了一本字體標本。它不僅經歷了五個世紀，而且還經歷了電子排版的飛躍，基本上沒有改變。 " /><label for="MainContent_test_1"> 自15世紀以來，Lorem Ipsum一直是業界的標準假文本，當時一位不知名的印刷商拿著一版印刷品，爭先恐后地制作了一本字體標本。它不僅經歷了五個世紀，也經歷了電子排版的飛躍，基本上沒有改變。</label></td>/span> </tr>/span> </table>/span>

我這樣修改了我的樣式表，但還是看到了單選按鈕和文本之間的斷裂：

我修改了我的樣式表。

 <style> 

   .radioBL input[type="radio"/span>] {
    margin-right: 10px;
    
}

label {
  word-wrap: break-word;
}
    </style>>
  <asp: RadioButtonList CssClass="radioBL label"/span> ID="test" runat="server" > 
      <asp: ListItem CssClass="label" Text="在出版和圖形設計中，Lorem ipsum是一種占位符文本，通常用于展示檔案或字體的視覺形式，而不依靠有意義的內容。Lorem ipsum可以在最終拷貝之前作為占位符使用。"></asp:ListItem>
      <asp: ListItem CssClass="label" Text="Lorem Ipsum自15世紀以來一直是業界的標準虛擬文本。當時，一個不知名的印刷商拿著一排排的字體，爭先恐后地做了一本字體標本。它不僅經歷了五個世紀，而且還經歷了電子排版的飛躍，基本上沒有改變。"></asp:ListItem>
          
  </asp:RadioButtonList>/span>

uj5u.com熱心網友回復：

使用word-wrap: break-word;允許不可分割的單詞在過大時被分割。

你可以用word-break: break-all;

span class="hljs-selector-tag">label {
  word-wrap: break-word;
}

< label for="html"/span>> < input type="radio" id="html" name="fav_language" value="HTML"> 自15世紀以來，Lorem Ipsum一直是業界的標準假文本，當時一位不知名的印刷商拿著一版印刷品，爭先恐后地做了一本字體標本。它不僅經歷了五個世紀，也經歷了電子排版的飛躍，基本上沒有改變。</label></td>/span>
</label>/span>

這是你所尋求的問題解決方案的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"/span>] {
        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是一個占位符文本，通常用于展示檔案或字體的視覺形式，而不依賴有意義的內容。Lorem ipsum可以在最終文本出現之前作為占位符使用。""在出版和平面設計中，Lorem ipsum是一種占位符文本，通常用于展示檔案或字體的視覺形式，而不依靠有意義的內容。
          />在出版和平面設計中，Lorem ipsum是一種占位符文本，通常用于展示檔案或字體的視覺形式，而不依賴有意義的內容。Lorem ipsum可以在最終文本出現之前作為占位符使用。</label></td>
      </tr>/span>
      <tr>/span>
        <td>< label for="MainContent_test_1"> < input id="MainContent_test_1" type="radio" name="ctl00$MainContent$test" value="
自15世紀以來，Lorem Ipsum一直是業界&#39;的標準假文本，當時一位不知名的印刷商拿著一排排的字體，爭先恐后地做了一本字體標本。它不僅經歷了五個世紀，而且還經歷了電子排版的飛躍，基本上沒有改變。"。
          />
自15世紀以來，Lorem Ipsum一直是業界的標準假文本，當時一位不知名的印刷商拿著一版印刷品，爭先恐后地制作了一本字體標本。它不僅經歷了五個世紀，也經歷了電子排版的飛躍，基本上沒有改變。</label></td>/span>
      </tr>/span>
    </table>/span>

uj5u.com熱心網友回復：

試試這個帶有單選按鈕的樣式表，它可以作業：

當你運行它時，你會看到這個：

標籤：

上一篇：將Html.DropDownList的選擇值傳遞給控制器。

下一篇：如何用iTextSharp從可資料化生成一頁一行的PDF？