Question

我想将一些歌曲的歌词显示在一个容器中，该容器的宽度和高度在屏幕的剩余空间中尽可能扩大（到屏幕底部和右侧的边缘），希望滚动区域（如果需要）始终保持水平（无垂直滚动）。如果歌词长于可用高度，我希望其余文本显示在第二列（顶部）中。列的宽度也不固定，它们由最长的线定义（不应换行）。列数取决于文本的长度。

到目前为止，我设法得到了这样的东西：

flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* <-- allows multi-line flex container */
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 0px;
  margin: 5px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last, mmh, yeah</flex-item>
  <flex-item>Persecution you must fear</flex-item>
  <flex-item>Win or lose you're about to get your share</flex-item>
  <flex-item>Got your mind set on a dream</flex-item>
  <flex-item>You can get it though hard it may seem now</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last, I know it</flex-item>
  <flex-item>Listen, Rome was not built in a day</flex-item>
  <flex-item>Opposition will come your way</flex-item>
  <flex-item>But the harder the battle, you see</flex-item>
  <flex-item>Is the sweeter the victory now</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last</flex-item>
  <flex-item>I know it</flex-item>
  <flex-item>(You can get it if you really want) don't I show it</flex-item>
  <flex-item>(You can get it if you really want) don't give up now</flex-item>
  <flex-item>(You can get it if you really want) keep on trying</flex-item>
</flex-container>

它的主要问题是，它要求将每一行文本放在HTML标记之间，这可以在服务器端进行，但是我不确定这是一个好主意。你可否确认？您知道做这样的事情的正确方法是什么吗？

感谢您的帮助。

Answer 1

只需向父div声明一个恒定的高度，然后将此CSS属性添加到歌曲歌词所在的父div。

overflow-y: scroll;

然后滚动条将出现在该div上（请确保将div的高度声明为恒定值，否则它将无法正常工作）。

Answer 2

我希望滚动区域（如果需要）始终保持水平（无垂直滚动）。

为此，我添加了overflow-y: hidden;和overflow-x: auto;。

它的主要问题是，它需要将 HTML标记之间的文本，可以在服务器端执行，但是我不确定这是个好主意。

我认为您必须像以前一样用html标签包装每个 verse 。我认为没有更好的方法。

我还向max-height: 250px;添加了flex-container，以演示overflow-x的功能。您可能需要在设置中使用height: 100%进行更改。

flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: silver;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  max-height: 175px;
}

flex-item {
  margin: 5px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last, mmh, yeah</flex-item>
  <flex-item>Persecution you must fear</flex-item>
  <flex-item>Win or lose you're about to get your share</flex-item>
  <flex-item>Got your mind set on a dream</flex-item>
  <flex-item>You can get it though hard it may seem now</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last, I know it</flex-item>
  <flex-item>Listen, Rome was not built in a day</flex-item>
  <flex-item>Opposition will come your way</flex-item>
  <flex-item>But the harder the battle, you see</flex-item>
  <flex-item>Is the sweeter the victory now</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>You can get it if you really want</flex-item>
  <flex-item>But you must try, try and try, try and try</flex-item>
  <flex-item>You'll succeed at last</flex-item>
  <flex-item>I know it</flex-item>
  <flex-item>(You can get it if you really want) don't I show it</flex-item>
  <flex-item>(You can get it if you really want) don't give up now</flex-item>
  <flex-item>(You can get it if you really want) keep on trying</flex-item>
</flex-container>

Answer 3

评论中没有足够的空间供我回复，因此我将使用“回答”功能发布此回复。不幸的是，这不是答案。

我认为 OP 要求的是 CSS Multicol 正确完成。

列当前未正确实现。您只能选择最小（不是最大）列宽。用户必须手动从一列文本的底部滚动到下一列的开头，因此阅读长文本很困难。

设计列以在任何视口宽度下智能增长并不困难。以下是应如何处理列：

如果文本很少，则仅显示一列（具有固定的给定宽度），直到达到视口高度。此时只有一列，填充可用高度。然后显示两列，第一列与视口一样高，第二列与第一列一样自上而下增长。

如果一列或多列超过了视口的整个宽度，则显示相同的列布局，但添加了水平滚动条。

此设计支持轻松阅读任何文本。我希望 CSS 设计师能读到这里。

具有自动multicol文本换行的水平可滚动div

3 个答案: