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;
}
I am currently retrieving data from an API that provides information in a specific format. Here is an example of the JSON data I receive: { "total":1, "launches":[ { "name":"Falcon 9 Full Thrust | BulgariaSat-1", "net":"June 23, 2017 1 ...
I need assistance with iterating through elements on a webpage that are all categorized under the html <article> tag. How can I achieve this? <article> <div class="inner-article"> <a style="height:150px;" href="/shop/jackets/v87vh6 ...
function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...
Can we replicate the outer glow effect that Safari and other browsers automatically add to an input field without using jQuery? If you want to remove it, check out this article: Thank you! ...
In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app. The challenge lies in handling dynamic fonts. What approaches ha ...
Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...
Can someone help me figure out how to change the color of the bar displayed in this link: I need assistance with modifying the breadcrumb navbar. Is there a way to change the color to yellow? I attempted editing the header file, but it didn't produ ...
Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...
I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...
Below is the content of my index.erb file: <a class="btn" href='javascript:TestFunction()' role="button">TestFunction</a> <script language="javascript"> function TestFunction() { $.post("test_function", { action ...
My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...
I'm looking to increase the spacing between each menu item as they appear too close together. Can someone help me with managing this? The menu names are currently right under one another, almost touching. What is the best way to create more space betw ...
Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...
Using node.js, I developed an application that gathers data in a MongoDB database. For example: name: John pagename: mypage links: [link1, link2, link3] The task at hand is to generate static HTML pages with the format pagename.mydomainname.com, and ins ...
My webpage is filled with inline-block divs that are contained within a larger div like so: <div class="container"> <div class="text">Text 1</div> <div class="text">Text 2 ... rest of the nu ...
Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...
Trying to display the value of an AngularJS variable in HTML using this code: <div ng-controller="MyTextbox"> <p>Last update date: {{nodeID1}} </p> Here's my angularjs controller code: angular.module("umbraco").controller("MyTex ...
Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...
After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...
The for loop I have is functioning properly: <div id="page1div"></div> <script> list = " "; for (var i = 0 ; i < length ; i++) { list = "<h1 class='entriesdisplayed'>" + item(i) + ...