如何将可水平滚动的 div 中的内容分成两行？
[英]How to make the content in a horizontally scrollable div broken into two lines?
问题描述
下面的代码生成一个水平滚动的 div。 我想让这个文本： I want to break this text up into two lines ，分成两行，而不是放在一条长线上。 我尝试减小.navigation-item-content的宽度，但它没有将文本分成两行，只是移动了.navigation-item-content div。
有什么建议么？ 我只是无法让它工作。
<.DOCTYPE html> <html> <head> <title>Page Title</title> <style>:navigation { white-space; nowrap: display; flex: flex-wrap; nowrap: overflow-x; auto: overflow-y; hidden: background-color; white: background-color; lightgray. }:navigation-item { padding; 12px 11px 7px 11px: width; 100%. }:navigation-item-content { display; flex: flex-direction; row: justify-content; center: align-content; center. }:navigation-item-title { text-align; center; } </style> </head> <body> <div class="navigation"> <div class="navigation-item"> <div class="navigation-item-content"> <p class="navigation-item-title"> <span>I want to break this text up into two lines</span> </p> </div> </div> <div class="navigation-item"> <div class="navigation-item-content"> <p class="navigation-item-title "> <span>I want to break this text up into two lines</span> </p> </div> </div> <div class="navigation-item"> <div class="navigation-item-content"> <p class="navigation-item-title "> <span>I want to break this text up into two lines</span> </p> </div> </div> <div class="navigation-item"> <div class="navigation-item-content"> <p class="navigation-item-title "> <span>I want to break this text up into two lines</span> </p> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2020-04-18 19:48:56
您需要对 styles 进行一些更改。 .navigation class 使width: 100%和.navigation-item class 添加width除以 100 除以您的项目编号。 喜欢：
.navigation {
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background-color: white;
background-color: lightgray;
flex: 1 1 100%;
position: relative;
}
.navigation-item {
display: flex;
flex-wrap: wrap;
padding: 12px 11px 7px 11px;
flex: 1 0 25%;
white-space: normal;
}
.navigation-item-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.navigation-item-title {
text-align: center;
}
解决方案2
0 2020-04-18 19:40:53
您可以在要换行的地方添加<br>标记，也可以从.navigation 中删除white-space:nowrap ，这样它就不会在同一行中全部 go
解决方案3
0 2020-04-18 19:53:08
考虑添加一个特定的宽度来创建换行符并禁用收缩：
.navigation { display: flex; overflow: auto; background-color: white; background-color: lightgray; }.navigation-item { padding: 12px 11px 7px 11px; width: 200px; flex-shrink: 0; /* don't forget this*/ }.navigation-item-title { text-align: center; }
<div class="navigation"> <div class="navigation-item"> <p class="navigation-item-title"> I want to break this text up into two lines </p> </div> <div class="navigation-item"> <p class="navigation-item-title "> <span>I want to break this text up into two lines </p> </div> <div class="navigation-item"> <p class="navigation-item-title "> I want to break this text up into two lines </p> </div> <div class="navigation-item"> <p class="navigation-item-title "> I want to break this text up into two lines </p> </div> </div>
如何限制列表父 div 的高度并使内容可滚动？
[英]How to cap the height of a lists parant div and make the content scrollable?
如何设置一个可水平滚动但垂直固定在另一个Div内的Div
[英]How to set a Div scrollable horizontally but vertically fixed inside another Div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.