I'm trying to implement ellipsis on my website but the following HTML / CSS code isn't working as expected.
CSS:
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
After reviewing the original post, it seems that we are making some assumptions, but just to be sure... ;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
UPDATE: The solution was to apply styling to the paragraph instead of the div.
To truncate an element, consider using position:absolute instead of float:left to avoid unexpected side effects.
Here is an example that worked successfully for me:
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...
There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...
I'm working on a grid of cards where hovering over one card expands the bottom section to reveal more content. The issue is, when it expands, it pushes all other cards down. What I actually want is for it to overlay on top of the card below it. Here ...
Attempt number one did not work due to padding issues in the columns. Attempt number two also failed, leading me to believe I may be making a mistake somewhere. This is what I am aiming for: https://i.sstatic.net/yTz6o.png Can anyone provide some assis ...
(apologies for any misspelled words) Hey everyone, I hope you're having a great time. This is my first experience with ajax, and I'm trying to incorporate some elements (messages sent and received) into HTML using ajax. However, all I see is an u ...
I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...
I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...
During my exploration of an AJAX/JQuery tutorial for a registration script that interacts with PHP/MySQL and is submitted via JQuery, I encountered a recurring issue. The problem lies in the form submitting directly to the action page instead of its intend ...
While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a men ...
I've come across an issue that involves having the following code snippet in the body of an HTML file: html, body { width: 99%; height: 99%; margin: 0px; overflow: hidden; } #container1 { display: flex; gap: 2%; width: 90%; heigh ...
Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...
I am facing an issue with setting transform: translateY(); based on the scroll event value. Essentially, when the scroll event is triggered, #moveme disappears. For a live demonstration, please check out this fiddle: https://jsfiddle.net/bo6e0wet/1/ Bel ...
Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...
When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...
Looking at the setup of my website, I have a menu button and comments section that need to appear on every page. Instead of manually adding this code to each HTML file, I decided to streamline the process by using a JavaScript file that generates all of th ...
My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...
issue I encountered an issue where <textarea> and Javascript had some quirks when trying to transfer the value into a <pre> tag. My aim was to implement a blinking caret in the <pre> as if I were pressing F7. The reason behind not using ...
I'm developing an Ionic 4 app with Angular and looking to incorporate Up and Down Arrow buttons for vertical scrolling from top to bottom and vice versa. ...
Can someone assist me with adding a fade effect between elements in my code? Any advice or suggestions would be greatly appreciated! $("#example p:first").css("display", "block"); jQuery.fn.timer = function() { if(!$(this).children("p:last-child").i ...
Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...