I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it?
Here's how I've set the text:
.box h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box h3:hover {
text-overflow: initial;
white-space: normal;
background-color:blue;
display: block;
}
By specifically defining a width for the box element, you are inadvertently causing its height to increase as well.
The CSS is attempting to accommodate the new content within the box, but since it cannot expand the width any further, it has no choice but to extend vertically instead.
To achieve this effect during hover, you can set the position attribute to absolute and make it opaque within a div element with a higher z-index than the one that should appear beneath it (although the necessity of this step is uncertain).
This particular solution appears to achieve the intended outcome: http://codepen.io/anon/pen/Xdbvex
Adjust the styling of the .box by setting it to position:relative, and manage the behavior of h3:hover by giving it a position:absolute value.
Currently, in the layout, when hovering over new characters, they fill the box causing it to expand in height due to width restrictions.
Without the use of JavaScript, one would need to lift the hovered-over element from the DOM using absolute positioning.
However, this action may result in the elements below it moving up the page, which is not desired.
It's a challenging situation without JavaScript, and I'm unable to find a solution that doesn't involve duplicating content on the screen. The provided code works but could use some cleanup :)
* {
margin: 0px;
padding: 0px;
}
.box {
width: 170px;
}
.wrapper {
position: relative;
}
.box h3 {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.hidden {
display: none;
}
.wrapper:hover > .hidden {
display: block;
color: white;
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
background-color: blue;
}<div class="box">
<div class="wrapper">
<h3>Really long text that will wrap</h3>
<div class="hidden">Really long text that will wrap</div>
</div>
<h2>Text Below its dfg asdrg sdh zxdh xcgh .</h2>
</div>Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...
Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...
I am currently utilizing jQuery and AJAX to perform form validation when a new user is being created on my website. My development environment consists of OOP PHP in conjunction with jQuery and AJAX. Here is the code snippet I am using: $.ajax({ ...
While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...
I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...
I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...
I have encountered an issue in my code where if an element is not currently doing something (specifically, "playing"), then I initiate the playing sequence. However, if it is already playing, I stop the action. While I have successfully implemented the sta ...
As a newcomer to AJAX and PHP, I am facing some challenges with an inventory management system built using phpmyadmin and wamp. The registration/login system is functioning well. However, upon user login, a table displaying all inventory items is generated ...
Welcome to my page where I have a specific functionality that needs to be implemented. What I am looking for is, when the user clicks on the "accept" button, the "accept" function should be called with unique parameters attached to each row. Below is the ...
I am looking for a way for users to input text in the "your text" container and then click "add". This action should create a new container within the larger red-lined container with the information provided by the user. I know how to do this already, but ...
I am currently working on a Greasemonkey script to customize my Facebook experience by hiding certain news updates. The challenge I am facing is that I have the ID of an element that does not exist in the DOM yet. Specifically, it is the small box that app ...
As I work on building an HTML table, I've encountered a challenge. The table code looks like this: This is the structure of my table: <table class="table" style="font-size:22px; width:100%"> I want to ensure that everything fits within the pa ...
Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...
Seeking assistance with changing an image inside a div to another image with a simple mouse click. Wondering if this can be achieved through CSS or if jQuery would be the better option. Here is the code snippet: <div id="slideshow"> <img ...
Currently, I am developing a dynamic website that allows users to search for doctors based on location and specialty. You can see an example of how it works here: https://i.sstatic.net/uQEjS.png Below is the main code for my homepage: index.php <scri ...
Is there a way to set the border color of a fieldset while removing the default border color? I have tried using a class but it doesn't seem to work as expected. How can I achieve setting the border color for the fieldset? <fieldset class="field_s ...
Here is the layout in the div element: <div class=" wrap clear"> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block orange float"& ...
In the process of developing a markdown editor, I am currently focusing on the functionality of the B (bold) button which needs to toggle. It's important to mention that I am utilizing this library to handle highlighted text in a textarea. Below is t ...
Imagine I have two container elements named container1 and container2. First, I assign a width of 30% to container1 and 60% to container2. Then add a border between the two containers. However, when I attempt to print, container1 takes up the full 100% o ...
I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...