When I apply an ellipsis to the text within a list element that has disc bullet points, it hides the bullet point itself.
I discovered that applying overflow: hidden to the list will also hide the bullet point. Moving this rule to the anchor within the list didn't solve the issue; it still hid the parent list element's bullet point. However, when I added a sibling element to the anchor, it worked as expected.
You can see an example of this issue here: http://jsfiddle.net/EByrk/1/
When the list-style-position:inside property is applied to a List, it stays within the overflow.
Nevertheless, I remain perplexed by the behavior outlined in the query. Could this be a glitch?
If you want to avoid placing the bullets inside the text, here's a neat trick you can use:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8>
<style>
ul {padding-left: 10px;}
li {width: 150px; position: relative;}
li a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
}
li:before {
content:"\2022 ";
padding:0 5px 0 0;
vertical-align:middle;
position: absolute;
left: -15px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">This is a long line of lorem ipsum dolor</a></li>
<li><a href="#">This is shorter</a></li>
<li><a href="#">This is a long line of lorem ipsum dolor</a></li>
</ul>
</body>
</html>
To maintain the bullet points, you can set the display property of li a to inline-block.
li a {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
}
Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...
Currently, I am in the process of incorporating a search functionality into my property rental application. I have successfully added the Nextjs Router to handle the routing. However, when attempting to access localhost:3000/search, an error is encountered ...
I'm facing an issue and I'm looking for a solution... Upon entering my homepage, I would like to display a popup image showcasing a new event so visitors can see it before accessing the website. I attempted to achieve this using JavaScript but w ...
Starting off, I want to mention that my approach may not be the most efficient. As a novice in JavaScript and PHP, I am aware that there are better and simpler ways to achieve what I'm attempting. The issue seems to be related to session variables an ...
I'm attempting to use JavaScript to open a new window, but the HTML content is not being added: var callScriptText = $('#callScriptText').html(); var url = '/Action/CallScript/?callScript='; // Open the current call script in a n ...
While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...
I am facing an issue with my html file and a .txt file stored in the same directory on a webserver. In the html file, I have the following code: <html> <head> <script> window.onload = function() { receiveMessage(); } function recei ...
My code includes a div within another div, taking up 50% of the page's width: <div id="mainContainer" class="mainContainer"> <div id="scroller" class="scrolling"> <!-- items here should make the div really long --> & ...
Attempting to implement a fullscreen mode (using HTML5 fullscreen) for a canvas object created with Fabric.js. var canvas = fabricCanvas.getSelectionElement(); if(canvas.requestFullScreen) { canvas.requestFullScreen(); } else if(canvas.webkitRequestFu ...
Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...
Struggling with theming in Material-UI, particularly when it comes to customizing element colors. Some elements default to 'theme.palette.main.dark' and I want to override this behavior. For example, the TextField and SpeedDial components automa ...
Can you help me solve a challenge I'm facing? I have a website with a fullsize background image, and I need to attach a div to a specific position on the image while ensuring that it scales in the same way as the background image with the "background ...
Is there a way to make a checkbox stay disabled even after refreshing the page? Currently, when I click the checkbox it disables, but upon refreshing the page, it goes back to being enabled. $( "input[type='checkbox']").click(function(event){ ...
I am struggling with changing the class of ul inside the ul.navigator. I want to change it only when I click on a particular li, but my current approach doesn't seem to be working. Can anyone provide some guidance or assistance? $('.navigator& ...
Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...
Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...
I'm new to this, so please bear with me. I have some html and jQuery code: $(document).ready(function() { var d = new Date(); var month = d.getMonth() + 1; var year = d.getFullYear(); $("#month").val(month); $("#year").val(year) ...
After creating a dropdown menu click, I noticed some strange behavior. When I click the dropdown button, the menu appears as expected. However, if I move my cursor away without clicking the button again, the dropdown menu disappears and behaves like a hove ...
My current project involves working with an AngularJS application where I am facing a challenge in setting the cursor or focus on a specific text box when routing to a page. Despite my attempts using various methods such as setFocus() in JavaScript, autofo ...
I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...