我有这个简单的用例:项目标题和描述。 标题应出现在描述的上方,我希望标题确定整个列的宽度,也用于“描述”行。
这可能与CSS Grid,如果是这样,怎么样?
这是所需的输出:
这就是代码,基本上:
.grid-container { display: grid; grid-template-columns: 1fr; }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>I have this simple use case: an item title and description. The title should appear above the description and I want the title to determine the width of the entire column, also for the 'description' row.
Is that possible with CSS Grid, and if so, how?
This is the desired output:
And that's the code, basically:
.grid-container { display: grid; grid-template-columns: 1fr; }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>最满意答案
不要将列宽设置为1fr ,而是使用min-content 。
使用min-content ,该列将获取所有换行(文本换行)机会 。
它基本上包装所有文本,直到列达到最长单词的宽度。
.grid-container { display: grid; grid-template-columns: min-content; /* formerly 1fr */ }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>然后,禁止标题框中的换行符:
.grid-container { display: grid; grid-template-columns: min-content; } .A { white-space: nowrap; background-color: lightgreen; /* just for illustration */ }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>参考文献:
https://www.w3.org/TR/css3-grid-layout/#track-sizing https://www.w3.org/TR/css-sizing-3/#min-content 硬包装和软包装的区别? https://developer.mozilla.org/en-US/docs/Web/CSS/white-spaceInstead of setting the column width to 1fr, use min-content.
With min-content, the column will take all line break (text wrapping) opportunities.
It basically wraps all text until the column reaches the width of the longest word.
.grid-container { display: grid; grid-template-columns: min-content; /* formerly 1fr */ }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>Then, suppress the line breaks in the title box:
.grid-container { display: grid; grid-template-columns: min-content; } .A { white-space: nowrap; background-color: lightgreen; /* just for illustration */ }<div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div>References:
https://www.w3.org/TR/css3-grid-layout/#track-sizing https://www.w3.org/TR/css-sizing-3/#min-content Difference between hard wrap and soft wrap? https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
更多推荐
发布评论