I attempted to achieve this effect by applying the following CSS styles (you can view my attempt here):
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
}
In essence, I want the span element to shrink with ellipsis when the window size is reduced. Can you help me identify what I may have done incorrectly?
To achieve the desired effect, ensure that your CSS includes properties such as overflow, width (or max-width), display, and white-space.
http://jsfiddle.net/HerrSerker/kaJ3L/1/
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}
body {
overflow: hidden;
}
span {
border: solid 2px blue;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
display: block;
overflow: hidden
}<span>Test test test test test test</span>Addendum If you are interested in various techniques for line clamping (Multiline Overflow Ellipses), check out this resource from CSS-Tricks: https://css-tricks.com/line-clampin/
Addendum2 (May 2019)
According to this source, Firefox 68 will soon support -webkit-line-clamp!
Ensure you have a block element with a maximum size and set the overflow to hidden. (Tested in IE9 and FF 7)
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px;
}
To achieve multi-line text truncation in Chrome, you can utilize the following CSS properties:
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* maximum number of lines to display */
-webkit-box-orient: vertical;
This technique was inspired by how YouTube handles text truncation. ;-)
If you are using Chrome and need to apply ellipsis on multiple lines, you can use the following CSS:
To specify a certain width for the element, you can add the width property in your CSS:
.multi-line-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum... (truncated)word-break: break-all;
This particular CSS property was the key to solving my issue with a
<pre> </pre>
element
Nothing else worked for adding ellipsis...
Hey there, I wanted to give a quick heads up to anyone who happens to come across this. I had an issue with my h2 element inheriting
text-rendering: optimizelegibility;
//I ended up changing it to text-rendering: none; to solve the problem
This was causing the ellipsis not to appear. It seems like such a small detail can make a big difference, right?
After encountering a problem with ellipsis on Chrome, I discovered that enabling white-space: nowrap resolved the issue.
max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;
If you prefer not to adhere to a fixed width, you can achieve the same effect by utilizing display: inline-grid. Simply include this property in addition to the necessary ones.
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-grid;
}
Insert the following code snippet wherever you prefer:
For instance:
p{
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
This particular piece of code functions effectively, and the inclusion of the title HTML attribute ensures that the complete text will be displayed on-hover as a default behavior.
.truncated {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Optional: set a fixed max-width or width to the element if needed */
max-width: 200px; /* max-width: 100%; also works */
}<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
This is a long text that will be truncated, but shown on hover
</div>If you're looking to implement ellipsis in your text using CSS, you can achieve this by adding the following code:
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
It's worth noting that the above code snippet is primarily suitable for trimming single-line text. For additional techniques on how to trim text and display ellipsis effectively, you may want to refer to this informative website:
To enable ellipsis in your CSS, you can include the following code:
div {
display: block; // adjust as needed
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
My approach includes:
overflow-x: clip to collapse the content horizontallywhite-space: nowrap to prevent line breakstext-overflow: ellipsis adds the ... at the end of the textoverflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;
Note that using flex as a display property will not work in this scenario; consider using an alternative that better suits your requirements.
My JSON data for the other_prize is as follows: [{"prizeno":2,"prizedesc":"Rs :100,000/-","totalamt":100000,"conslation":"f","prizeticket":[{"seriesname":"RJ","digit":443581,"district":"THRISSUR"},{"seriesname":"RK","digit":633225,"district":"THIRUVAN ...
When I view my table on large screens, the TH elements are displayed at the top. However, when I switch to a mobile device, these THs move to the left side instead. Is this the default behavior of TH elements in tables? I am utilizing the 'responsive- ...
I have been making good progress on creating a tracker, but I am facing a challenge with a new feature. My goal is to allow the user starting the tracker to enter names that will be looked up by the tracker. My current approach involves inserting the name ...
I need help figuring out how to save a jQuery datepicker value in a php date formatted variable. My goal is to have: input field named "reviewdate" = 03/02/2015 input field named "reviewmonth" = 3 Both values should be stored in a mysql database. I am ...
Recently, I purchased a webshop and I am trying to implement a sticky header that remains at the top of the page all the time. Unfortunately, none of the solutions I've tried seem to be working, and I'm stuck on how to proceed. Is there anyone ou ...
On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...
I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...
I could definitely use some assistance in implementing code that involves div elements for a #header, #footer, and #main. I'm a bit unsure of where exactly to insert this code within the existing structure. I have already set up a basic HTML page pair ...
I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...
I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...
media.py: http://pastebin.com/r1nxPzTQ This file contains a Python class with methods like __init__ and show_trailer(self). fresh_tomatoes.py: http://pastebin.com/bcdUYiiu It's a Python script that generates an HTML file and populates it using data ...
Currently, I am honing my skills in vanilla JavaScript by working on a website project. In this project, I have implemented a feature where clicking on a fingerprint icon triggers an input field to appear for the user to enter their password. The code snip ...
Encountering a problem where the collapsible navigation menu button is unresponsive on mobile browsers, while functioning correctly on desktop. I suspect it may be related to the parallax script installed by my client. Check out the page here: http://21 ...
Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...
I am attempting to incorporate a p5js canvas into a bootstrap grid structure. My goal is to have each div within the grid contain its own unique p5js canvas, which should adjust in size when the browser is resized. Below is my bootstrap grid setup, showca ...
Bootstrap 5 is being used, and two columns have been created on the page. The current output looks like this: https://i.stack.imgur.com/P6oZs.png Now, there's a need to display an orange color from end to end of the left column. To achieve this, h- ...
I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...
Currently, I am in the process of creating a website for my class project. My professor recommended placing the logo on the top left corner of the website. While someone has assisted me in positioning the logo, I am facing an issue with the excessive space ...
profiles_information.php I am working with a PHP document that receives information from Ajax and sets it as attributes to an object of the Profile class. I have created HTML to display a table, where users can click on "Add" to send the object to add_to_ ...
How can I pass a form directly to a controller parameter in CakePHP 2.4? The controller expects the parameter in the format /Model/index/by:keyword, but FormHelper is adding a question mark and an equals sign into the URL: Model/index?by%3A=keyword. Here ...