将文本溢出设置为可见，在动态添加的 div 中没有滚动条-解网

问：

如何将文本溢出设置为可见，在动态添加的 s 中没有滚动条？根据文档，我认为这将是默认设置，但有些东西我不明白。将文本添加到直接或子项似乎不会更改输出。<div><div><p>

这是 CodePen 上的演示。

还有来自 CodePen 的代码：

let container = document.querySelector("#container");
let string = "HELLO WORLD!";

for (row = 0; row < 11; row++) {
  for (col = 0; col < 16; col++) {
    let tile = document.createElement("div");
    
    container.appendChild(tile);
    $(tile).addClass("tile");
    
    if (row == 5 && col > 1 && col < 14) {
      let p = document.createElement("p");
      
      tile.appendChild(p);
      $(p).addClass("letter");
      $(p).text(string[col - 2]);
    }
  }
}

:root {
  --tileWidth: 30px;
}

.container {
  display: grid;
  grid-template-columns: var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth);
}

.tile {
  display: block;
  width: var(--tileWidth);
  height: var(--tileWidth);
  position: relative;
  background-color: teal;
  font-size: calc(var(--tileWidth)*2);
  color: tomato;
  padding: 0;
  text-align: center;
  font-family: Impact;
}

.letter {
  overflow: visible visible;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container"></div>

JavaScript HTML CSS 溢出

let container = document.querySelector("#container");
let string = "HELLO WORLD!";

let z = 16 * 11;
for (row = 0; row < 11; row++) {
  for (col = 0; col < 16; col++) {
    let tile = document.createElement("div");
    tile.style.zIndex = z--;
    
    container.appendChild(tile);
    $(tile).addClass("tile");
    
    if (row == 5 && col > 1 && col < 14) {
      let p = document.createElement("p");
      
      tile.appendChild(p);
      $(p).addClass("letter");
      $(p).text(string[col - 2]);
    }
  }
}

:root {
  --tileWidth: 30px;
}

.container {
  display: grid;
  grid-template-columns: var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth) var(--tileWidth);
}

.tile {
  display: block;
  width: var(--tileWidth);
  height: var(--tileWidth);
  position: relative;
  background-color: teal;
  font-size: calc(var(--tileWidth)*2);
  color: tomato;
  padding: 0;
  text-align: center;
  font-family: Impact;
}

.letter {
  overflow: visible visible;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container"></div>

超。z-index 方法效果很好。我计划对这些元素进行动画处理，所以我的猜测是，如果它们移动，以相反的顺序添加 div 会在相反的方向上产生重叠。我尝试向字母类添加一个 z-index，但这并没有改变输出。我以为所有的 p 都会画在所有 div 的前面，而 p 没有背景颜色。每个元素是否为其子元素创建新的 z-index 框架？

0赞 Rip 2/14/2023

事实证明，我之前对 z-index 的实验不起作用，因为 z 默认处于禁用状态。元素的位置属性必须更改为默认值以外的任何属性，才能在绘制元素时使用元素 z 值。我仍然不清楚为什么 z-index 不适用于 p，因为文档说 position 属性适用于所有元素。在这里，我将字母嵌套在第二个 div 中，没有背景颜色、相对位置和 z 索引，字母溢出：codepen.io/fcdobbs/pen/mdGbYgB?editors=0100

上一个：优化递归脚本，将SVG元素批量添加到DOM中

下一个：在JSFidle或其他任何地方测试Pixijs示例？

将文本溢出设置为可见，在动态添加的 div 中没有滚动条

Setting text overflow to visible with no scroll bars in dynamically added divs

评论

评论