Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Is there a way to set the text overflow to visible without scroll bars in dynamically added <div>s? Despite what the documentation says, it doesn't seem to be the default behavior and I'm struggling to understand why. Adding text directly to the <div> or within a child <p> element doesn't change the output.

If you'd like to see a demo, check out this link on CodePen.

Here's the code snippet from the 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>

javascripthtmlcssoverflow

Answer №1

The issue at hand is that the tile to the right and below are overlapping due to their background color.

One solution could be changing the order in which the divs are inserted, for example, reverse order. Another option is adjusting the z-index so that tiles positioned up and left have a higher z-index.

Below you will find an illustration of modifying the z-index.

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);
}

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The data for my registration is not getting stored in the Firebase database as expected

I'm currently working on a registration app and it's my first time using firebase. My email address is successfully stored in the authentication section of firebase. However, when I try to connect my app to the database to store additional infor ...

javascriptangularjsfirebasefirebase-realtime-database

"Reconfigure web page layout to be perfectly centered

Currently, I am utilizing Angular Drywall to construct my website. By default, the alignment is centered which does not suit the template requirements that call for it to occupy the full 100% body width. body{ width:100%; margin-left:0; paddin ...

angularjshtmlcsstwitter-bootstrap-3

Troubleshooting: Issues with AngularJS $route.reload() functionality

I have an angular app and I'm attempting to refresh the page. I've tried using $route.reload() as recommended in multiple posts, but I can't seem to get it to work (Chrome is showing me an error). Here's my controller: var app = angula ...

javascriptangularjstwitter-bootstrap

Potential dangers involved in sending HTML content through an AJAX request over a secure HTTPS connection

I am exploring the idea of dynamically loading HTML content, such as updating a Bootstrap modal dialog's contents using AJAX calls instead of refreshing the entire page. However, before I proceed, I want to understand the potential risks involved and ...

javascripthtmlajaxsecurity

Managing a prolonged press event in a React web application

Hello everyone! I am currently using React along with the Material UI library. I have a requirement to handle click events and long-press events separately. I suspect that the issue might be related to asynchronous state setting, but as of now, I am unsu ...

javascriptreactjswebmaterial-uilong-press

Making HTTP requests with axios in Node.js based on multiple conditions

I'm facing an issue with making get calls using axios to both activeURl and inactiveURl. The goal is to handle error messages from the activeUrl call by checking data from the inactiveUrl. However, I keep receiving error messages for the inactiveURL e ...

javascriptnode.jsaxios

Error Loading JQuery: The function $() is not recognized in the Shopify platform

I seem to be overlooking something obvious. I am using Shopify and have included jQuery in the head section of the theme.liquid file: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> This script is placed rig ...

javascriptjquery

Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result. <html lang="en"> <head> <!-- Required meta tags --> < ...

htmlcssbootstrap-5

Exploring the capabilities of ECMAScript generators within the Intel XDK Simulator

I am attempting to utilize a generator that has been declared using function* in Intel XDK. The simulate function within XDK is said to be based on Chromium, though it's difficult to determine the specific version ('about' box and similar fe ...

javascriptintel-xdk

What Causes the Undefined Value of "this" in Vue 3 Functions?

Here is a basic example of a component in Vue 3: <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'Test', setup(){ return{ one, two } } }) function one(){ console. ...

javascriptvue.jsvuejs3

Updating an object with AngularJS

Let's consider the code snippet below: var absenceType = {name: 'hello'}; this.newAbsenceType = angular.copy(absenceType); After making changes to this.newAbsenceType, you want to apply these changes to the original object. I have explore ...

javascriptangularjs

Whenever I execute the 'ng serve' command, I encounter an issue with ineffective mark-compacts close to the heap limit, resulting in an allocation failure and a JavaScript

I'm currently using Angular 9 and Node.js 12. When I input ng serve, I encounter the following problem: C:\Users\homz\my-app>ng serve 93% after chunk asset optimization SourceMapDevToolPlugin vendor.js generate SourceMap <--- ...

javascriptnode.jsangularnpm

Issue with Nextjs 13: Unable to locate 'src/app/dashboard/layout.tsx' (deleted optional layout)

Deciding to start a fresh Nextjs 13.4.5 project, I set up an app directory. Within the app directory, I created a new dashboard directory and added page and layout components. Everything seemed to be functioning smoothly with two layout components - one i ...

javascriptreactjsnext.jsfrontend

The concept of inheriting directives/scopes

Just wondering if directives declared within a Component in Angular 2 automatically apply to its children Components. And when it comes to variables declared on the Component, do they get inherited by the children Components or must they be explicitly pa ...

javascriptangularjsangular

Tips for overriding bootstrap.css file in mvc asp.net using Visual Studio

I am currently working on creating a website using Mvc asp.net in Visual Studio 2013. I have integrated my css file, 'style.css', into the project, but I am encountering unwanted white spaces and margins around headers and other key elements, eve ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

Recently, I developed an npm package using React v17.0.2. The structure of the package.json file is as follows: { "name": "shoe-store", "version": "0.1.0", "private": true, "dependencies": ...

javascriptreactjstypescriptreact-nativenpm-package

Selenium unable to interact with Javascript pop-up box

I am currently working on automating a feature for our web application, specifically a form of @mentioning similar to Facebook. On the front end, when a user types @ into a text input, the API is called to retrieve the list of users and display them in a b ...

javascriptpython-3.xseleniumpython-behave

accessing the offsetTop property of React elements

When working in React, I've noticed that the offsetTop value of an element differs between componentDidMount and componentDidUpdate. This is surprising to me because I believed componentDidMount occurs after render, meaning the DOM elements should be ...

javascriptreactjs

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

htmlcssiframeresponsive-design

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui