I am currently facing an issue with a list created using Bootstrap 4, where some items contain long text that is causing problems on small screen devices. I have attempted to use white-space:nowrap and the text-nowrap class, but neither solution has fixed the problem.
Is there another way to resolve this issue?
Here is my code snippet:
<ul class='navbar-nav'>
<li class='nav-item'>
<a href='#' class='text-nowrap'>long textt...........</a>
</li>
</ul>
Is this the solution you seek?
<ul class='navbar-nav'>
<li class='nav-item'>
<a href='#'>long textt...........</a>
</li>
</ul>
.nav-item {
width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
https://jsfiddle.net/7wc3L8bh/ - practical example
If so, consider using Bootstrap 4's text-truncate class for better results.
Refer to its guidelines here (Keep in mind it works best with a block element)
If not, and you prefer your text to appear on the next line, apply the text-nowrap class instead.
Learn more about it from the documentation here (Make sure the element has a fixed width)
Avoid disrupting the layout of your components with long strings of text by utilizing .text-break to apply word-wrap: break-word and word-break: break-word. Instead of overflow-wrap which has limited browser support, we opt for word-wrap and include the deprecated word-break: break-word to prevent issues with flex containers.
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="text-break">long textt...........</a>
</li>
</ul>https://getbootstrap.com/docs/4.5/utilities/text/#word-break
Could someone please assist me in scraping a list of dates from: The dates can be found within a dropdown menu just above the option chain. I have experience scraping text from websites, but this specific text is utilizing 'select' & 'o ...
I am in the process of developing a flowchart builder using JavaScript. I need some guidance on how to connect two blocks (divs) with an arrow or line. Take a look at the illustration below ______ | | | DIV x---------------- | | ...
I've extensively reviewed the official documentation, but I couldn't find a way to adjust the size of the arrow in the React tooltip. <span className="icon margin-10-right txtSize20 txtBlue icon_profile-menu icon-tool" data-tip={`&l ...
I'm currently working on creating a 2 column layout using divs. The left column has a fixed size of 150 px, while the right column should extend to the right boundary of the browser. I've tried using both width:auto and width:100% values for the ...
While there may be many similar questions out there, I have yet to find a solution that works for me. Currently, I am developing a WYSIWYG editor and I want it to save when the user performs a keyup action. However, I do not want it to update after every ...
My goal is to gradually increase the filled amount of a progress bar using JavaScript. I have created a function called nxt() that should add 3.3% to the width of the progress bar every time it is called (for example, from 2.0% to 5.3%). However, my curren ...
How can I create a scrollable ul element? Currently, it appears that the ul flexbox extends beyond the browser window. html <div class="container"> <div class="header"> Untitled </div> <ul/> <li>1</li> ...
I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...
The hamburger menu is not working properly. I am facing an issue where the navigation does not appear when I press on the hamburger icon on a small screen. Can someone please guide me on how to resolve this problem? :/ <nav class="navbar bg-d ...
I am looking to utilize JavaScript to open an html file and input some data into specific elements. My attempt so far has been: var info_window = window.open('info_print.html') info_window.document.getElementById('new_info').innerHTML ...
In an attempt to automate the process of clicking on multiple links within a table, I have crafted the following HTML code: <div id="gadget-34365" class="gadget-inline" style="height: 905px;"> <div class="results-wrap search-results-dashboard-ite ...
Have you noticed a discrepancy in the inset box-shadow behavior with large border-radius on one side, particularly in Chrome? I'm curious about which browser is showing accurate results. Here's how it appears in Chrome: https://i.stack.imgur. ...
Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...
I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...
My Bootstrap table design looks great on larger screens like laptops, monitors, and tablets, but the size isn't optimized for phones. I've tried adjusting the width in percentages and pixels, but it's not working out. Any suggestions on how ...
Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...
Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...
Struggling to create a full-page gallery that allows for vertical scrolling through one image at a time. I've attempted different options but can't seem to crack it. Here is a snippet of my code: <style> #img1 { background-image: url("&l ...
message button <div id="messagebutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;"> <span class="btn reply" id="messageb">Message</span> </div> text box <div class="col-lg-12" style="background:#eff9c7;" ...
I am experiencing an issue with the fixed navigation at the top of my site. The navigation links to sections further down on the page, but it overlaps part of the section I link to instead of stopping exactly at the beginning of the section. You can see an ...