Restrictions on the number of characters based on the size of fonts in an html list sc

Recently, I attempted to implement a ticker message on my website using li scroller.

However, it appears that there is a limitation on the number of characters that can be displayed in the ticker message when different font sizes are used. With a smaller font size, more characters scroll out, while with a larger font size, fewer characters are visible.

I am only utilizing one list:

<ul id="tck_msg">
    <li>Welcome to my place and welcome to this nation</li>
</ul>

For example, when I use a font size of 6vh, the message displays as "Welcome to my place and welcome". However, with a font size of 2vh, the entire message "Welcome to my place and welcome to this nation" is shown.

Could anyone shed some light on why this happens?

javascriptjqueryhtmlcsswordpress

Answer №1

The reason for this issue lies in the width of the ul element. With larger text, the parent style (overflow:hidden) effectively hides any excess text.

Resolution: Simply expand the width of the ul element to accommodate the larger text.

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

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall. My query now is how can I vertically center these images so they ...

jqueryhtmlcsstwitter-bootstrap

Version 4.6.4 of TypeScript is flagging the code as invalid

How can I fix this Typescript problem? const userInformation: { email: string; id: string; _token: string; _tokenExpirationDate: string; } = JSON.parse(localStorage.getItem('userData')); https://i.sstatic.net/xMh9P.pn ...

javascriptangulartypescriptnullable

Unusual default Nav bar positioning

When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...

htmlcss

Creating a table in HTML using the innerHTML property

document.getElementById("outputDiv").innerHTML = ""; document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; for(j=1;j<=10;j++) { document.getElementById("outputDiv").innerHTML += "<td align=center>"+St ...

javascripthtml

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss

Tips for handling ng-if during element presence checks

There's a hidden div on my web page that is controlled by an ng-if directive. I'm looking to create a test that confirms the presence of the element only when it should be visible. If the condition set by ng-if is not met, the element is complete ...

javascriptangularjsprotractor

Tips for Adjusting the Size of a Search Bar

I've encountered an issue with a form I was developing. I decided to start fresh on an old project that included recreating the Google homepage design. While I aimed for an exact replica, some elements were unnecessary. The search box (form) moved to ...

htmlcsssearch-engine

Acquiring the markers, however the latitude and longitude are both null - vue.js

I have been working on displaying markers on a map. When I fetched the data, everything seemed fine in Vue DevTools. The `this.markers` property also contains the data. However, to my surprise, the values for `lat` and `lng` inside the markers are showing ...

javascriptgoogle-mapsvue.jsvuejs2

Lazy Load immediately loads images that are visible on the screen without needing a click

I am facing an issue with Lazy Load on my image-heavy website. I want the images to load only when a button is clicked, but currently, it only partially works. Images below the fold follow the desired behavior of loading on click, but those above the fold ...

javascriptjquerylazy-loadingjquery-lazyload

Is there a problem with the timing of jQuery rollover/out button functionality?

I have a setup in progress where a series of buttons with titles reveal more information on rollover. The layout features an intro section in the center, surrounded by the buttons. When hovering over any button, it triggers a function to hide the intro and ...

jquerycallbacktimeoutrollover

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

javascripthtmlangularjsangularjs-directivepagination

Unable to stop the default action in IE for certain code

I am facing an issue on my website where the JavaScript I have implemented to prevent page reload is not working in Internet Explorer. The code functions properly in all other browsers, except IE. Here is the JavaScript code snippet that should prevent pa ...

javascriptjquerypreventdefault

Best practices for efficiently utilizing setInterval with multiple HTTP requests in NodeJS

Imagine you have a collection with 3 to 5 URLs. You want to send requests every 5 seconds, one by one. Here is how I approached this: setInterval(() => { array.forEach(element => { request .get(element.url) .on('response', ...

javascriptnode.js

"Wordpress Pluto theme: A stellar choice for your

I'm trying to add a link in my main template.index file that will redirect to one of my pages when clicked on the JavaScript button at the top in Pluto theme. Currently, the text is there but clicking on it opens something I don't want. Here&apo ...

javascriptphpjqueryhtmlwordpress

Arranging Angular Array-like Objects

I am in possession of an item: { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "nice ...

javascriptjsonangularsortingtypescript

Troubleshooting Problem with Retrieving jQuery Post Outcome

I'm attempting to execute this straightforward Ajax Post example: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready ...

phpjqueryajaxpost

Calculating the total number of clicks on a button using PHP

I am attempting to track the total number of clicks on a button by individual users, rather than combining all members' clicks. Each user's clicks on the button should be logged separately. I am struggling to determine the best approach for this ...

javascriptphpjquerymysql

Issue with PrimeNG Calendar not updating date value within modal

While using the PrimeNG Calendar control, I encountered an issue. Even though I am able to select and store dates, when I try to fetch dates from a database and update the Modal, I receive the following error message: https://i.sstatic.net/LWSUF.png <p ...

javascriptangularangular5primeng

Access all the properties of an object within a mongoose record

My database contains a collection of documents that are structured using the mongoose and express frameworks. Each document follows this schema: const userSchema = new Schema({ firstName: { type: String }, lastName: { type: String }, email: { t ...

javascriptmongodbexpressmongoosemongodb-query