如何自动对文本进行分段以适合溢出容器？

Question

我想要将文本放入容器中，但无论我尝试什么，它似乎仍然想要添加水平滑块。

我尝试添加自动换行：break-word:、display: inline-block; 和 max-width: 100%;进入我的样式表，但似乎没有任何作用。我的参考站点使用“margin-block-start: 1em;、margin-block-end: 1em;、margin-inline-start: 0px; 和 margin-inline-end: 0px;”在它的代码中，但我的索引无法识别这些命令。我正在使用 neocities 顺便说一句 idk 如果这改变了什么。

这是我的CSS 我的CSS 这是我的 html html 这是我的容器的样子 container 我做错了什么？

Answer 1

要不添加水平滚动条，您需要首先删除代码中的一些CSS

overflow-x：隐藏；和溢出：自动；

然后添加

溢出-y：自动；而不是滚动

然后添加

空白：正常；

同时在内联样式中将宽度添加到100%

将长文本分成下一行

这是更新的样式

.artdates {
  border: 1px solid red;
  width: 180px;
  height: 220px;
  margin: auto;
  max-width: 100%;
  overflow-y: auto; 
  display: inline-block;
  word-break: break-word;
  white-space: normal; 
}

<div class="artdates" style="color:red; font-size:100%; font-family:Georgia; width:100%;">
    ★ PLAZMA
    <p>plazma was first a ponysona I made in ponytown but I ended up shifting them over to a radioactive alien dog + blue's clues sona</p>
</div>