如何讓CSS長欄文本加寬網格而不是溢出？
[英]How to make CSS long column text widen grid instead of overflowing?
問題描述
我目前正在重構我的 Firefox 插件之一，我注意到其中一個翻譯出現了一個問題：我有一個選項卡開關，它是一個 CSS 網格，有 2 列，兩列的寬度都是 50%。 使用較短的選項卡標題，一切都按預期工作，但較長的標題會溢出。
相反，我想要更長的標題來擴大它們各自的欄目。 tab-button s 應具有相同的寬度， tab-button-container應具有fit-content寬度。 雖然可以為tab-button-container寬度設置一個適當的絕對值，但我不想不必要地浪費任何屏幕空間。
你能幫助我嗎？ 謝謝！
html { overflow: hidden; padding: 0px; margin: 0px; border: none; width: max-content; height: fit-content; font-size: 14px; } body { overflow: hidden; font-family: sans-serif; margin: 0px; height: fit-content; width: max-content; border: none; } main { padding-left: 20px; padding-right: 20px; width: max-content; }.tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); padding: 4px; column-gap: 4px; width: calc(100% - 4px); min-width: max-content; display: grid; position: relative; left: 50%; transform: translate(-50%,0); background-color: rgb(226, 226, 226); border-radius: 5px; cursor: default; margin-top: 20px; margin-bottom: 20px; }.tab-button { white-space: nowrap; display: inline-block; padding-left: 15px; padding-right: 15px; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; cursor: pointer; text-align: center; }.tab-button--active { background-color: #0a84ff; color: white; }.tab-button--inactive { background-color: transparent; color: #676767; transition: 0.3s; }.tab-button--inactive:hover { background-color: rgb(200, 200, 200); transition: 0.3s; }
<html> <body> <main> <div class="tab-button-container"> <span class="tab-button tab-button-encrypt tab-button--active"> <i class="fas fa-lock"></i> <a class="tab-button-label">Salataan</a> </span> <span class="tab-button tab-button-decrypt tab-button--inactive"> <a class="tab-button-label">Salaus puretaan loremipsum</a> </span> </div> </main> </body> </html>
2 個解決方案
解決方案1
2 2022-05-08 20:50:31
溢出問題是由於寬度有限引起的： .tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); } .tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); } 。 您需要更改列寬以適合內容：
html { overflow: hidden; padding: 0px; margin: 0px; border: none; width: max-content; height: fit-content; font-size: 14px; } body { overflow: hidden; font-family: sans-serif; margin: 0px; height: fit-content; width: max-content; border: none; } main { padding-left: 20px; padding-right: 20px; width: max-content; }.tab-button-container { grid-template-columns: repeat(2, minmax(min-content, calc(50% - 2px))); padding: 4px; column-gap: 4px; width: calc(100% - 4px); min-width: max-content; display: grid; position: relative; left: 50%; transform: translate(-50%,0); background-color: rgb(226, 226, 226); border-radius: 5px; cursor: default; margin-top: 20px; margin-bottom: 20px; }.tab-button { white-space: nowrap; display: inline-block; padding-left: 15px; padding-right: 15px; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; cursor: pointer; text-align: center; }.tab-button--active { background-color: #0a84ff; color: white; }.tab-button--inactive { background-color: transparent; color: #676767; transition: 0.3s; }.tab-button--inactive:hover { background-color: rgb(200, 200, 200); transition: 0.3s; }
<html> <body> <main> <div class="tab-button-container"> <span class="tab-button tab-button-encrypt tab-button--active"> <i class="fas fa-lock"></i> <a class="tab-button-label">Salataan</a> </span> <span class="tab-button tab-button-decrypt tab-button--inactive"> <a class="tab-button-label">Salaus puretaan loremipsum</a> </span> </div> </main> </body> </html>
解決方案2
0 已采納 2022-05-08 21:29:03
這就是解決方案。
html { overflow: hidden; padding: 0px; margin: 0px; border: none; width: max-content; height: fit-content; font-size: 14px; } body { overflow: hidden; font-family: sans-serif; margin: 0px; height: fit-content; width: max-content; border: none; } main { padding-left: 20px; padding-right: 20px; width: max-content; }.tab-button-container { grid-template-columns: 1fr 1fr; padding: 4px; column-gap: 4px; width: calc(100% - 4px); min-width: max-content; display: grid; position: relative; left: 50%; transform: translate(-50%,0); background-color: rgb(226, 226, 226); border-radius: 5px; cursor: default; margin-top: 20px; margin-bottom: 20px; }.tab-button { white-space: nowrap; display: inline-block; padding-left: 15px; padding-right: 15px; padding-top: 8px; padding-bottom: 8px; border-radius: 5px; cursor: pointer; text-align: center; }.tab-button--active { background-color: #0a84ff; color: white; }.tab-button--inactive { background-color: transparent; color: #676767; transition: 0.3s; }.tab-button--inactive:hover { background-color: rgb(200, 200, 200); transition: 0.3s; }
<html> <body> <main> <div class="tab-button-container"> <span class="tab-button tab-button-encrypt tab-button--active"> <i class="fas fa-lock"></i> <a class="tab-button-label">Salataan</a> </span> <span class="tab-button tab-button-decrypt tab-button--inactive"> <a class="tab-button-label">Salaus puretaan loremipsum</a> </span> </div> </main> </body> </html>
CSS 網格項目單元格擴展而不是溢出
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
CSS 網格項目單元格擴展而不是溢出
使用 css 網格，我如何得到 SHORT<div> 文本在較早的空間上換行而不是在移動設備上稍微溢出？</div><div id="text_translate"><p> 我的 (iPhone) 手機上出現以下問題。 我的文本（用空格分隔的相對較短的單詞（不是 &nbsps））在換行之前略微溢出。 我希望它包裹起來而不會溢出。 換句話說，我希望它在換行到下一行之前選擇一個更早的空間來終止一行（換行符）。</p><p> 我正在使用 CSS 網格來執行此操作。</p><p> 我很抱歉 CSS 有點冗長。 在我絕望中，我使用了各種我不完全理解的重置。 我的代碼在這里： <a href="https://codepen.io/Photog/pen/rNGEbKL" rel="nofollow noreferrer">https://codepen.io/Photog/pen/rNGEbKL</a></p><p> CSS</p><pre> * { font-size: 100%; } /* reset / initialize */ *, *:before, *:after { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Define variables for colors */:root { --bgnormal: black; --fgnormal: white; } /* ****************************************** */ /* Eric Meyer's reset.css: http://meyerweb.com/eric/tools/css/reset/reset.css */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* alphabetized */ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ******************************************** */ body { font-size: calc(0.75em + 1vmin); background-color: var(--bgnormal); } article,aside,div,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,li,main,nav,p,section,ul { font-family: Helvetica, Verdana, "Lucida Sans", Tahoma, Arial, "Century Gothic", sans-serif; font-weight: normal; font-size: 1em; font-size: 1rem; line-height: 140%; color: var(--fgnormal); background-color: var(--bgnormal); } /* ********************* */.grid-container { display: inline-grid; grid-template-columns: 20% 20% 10% 10% 20% 20%; grid-template-rows: auto; align-items: start; grid-gap: 1em; padding-left: 1em; padding-right: 3em; white-space: normal; width: 96vw; /* 96% of viewport */ }.grid-item-1 { grid-row: 1; grid-column: 1 / span 6; }.grid-item-2 { grid-row: 2; grid-column: 1 / span 6; }.grid-item-3 { grid-row: 3; grid-column: 1 / span 6; }.grid-item-4 { grid-row: 4; grid-column: 1 / span 6; } [class^='grid-item'] { display: grid; align-items: center; justify-content: center; font-size: 1em; color: var(--fgnormal); white-space: normal; }</pre><p> HTML</p><pre> <div class="grid-container"> <div class="grid-item-2"> If&nbsp;you're interested in purchasing, displaying or discussing my photographs, please contact me. I&nbsp;usually respond within three days. I'd&nbsp;be delighted to hear from you and know what you think. <br><br> I am available for critique sessions, workshops and presentations where I share my experience, creative process and techniques as a photographer and curator. </div> </div> <!-- grid-container --></pre></div>
使用CSS使溢出文本可讀
停止 CSS 網格列溢出
CSS 網格 - 即使內容過長也能保持網格的比例
文本增加列而不是滾動溢出
邊欄結束時如何使表格列變寬？
CSS Grid 內容溢出
PrismJs不隨CSS網格溢出
CSS 網格溢出
相關標簽