Styling Text on Buttons (Using CSS)

I need to modify my button, which contains lengthy text.
When the mouse pointer hovers over the button, I would like the long text to wrap into 2 or 3 lines so that more of it is visible. Additionally, I want the remaining text to be displayed with an ellipsis.
Something similar to this:-

original text:

This is a lengthy text that I wish to wrap within the button upon hovering, displaying it in 3 lines and ending with an ellipsis.

text inside the button (with a fixed width of 250px):

This is a lengthy text that I wan...

hovered text in the button (button height increases):

This is a lengthy text that I want to wrap within the button upon mouseover and display it in 3 lines, ending with e...

I have created a Plunkr in angularjs using the angular-material md-button.
Due to my lack of CSS expertise, I am facing challenges in customizing my button.

cssangularjsangular-material

Answer №1

button {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 250px;
  white-space: nowrap;
}

button:hover {
  overflow: auto;
  text-overflow: none;
  white-space: normal;
}
<button>
This is a lengthy text that I want to have wrapped inside the button with three lines showing, ending in ellipsis  
</button>

Edit: Upon further reflection, it seems achieving ellipsis on the expanded version is not possible. For more information, refer to this other SO Q&A.

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

What is the technique for modifying the Bootstrap 4 navbar button icon color?

I am currently working on a Bootstrap website where the hamburger toggler appears when the screen size is less than 992px. The code snippet for this feature is shown below: <button class="navbar-toggler navbar-toggler-right" type=&quo ...

csstwitter-bootstrapbootstrap-4

Implement the window.open functionality within a directive for optimal performance

I am attempting to activate the function $window.open(url, windowName, attributes); in my Angular application by using an ng-click event. I have created a directive and enclosed the window.open method within a trigger function that is connected to a butto ...

javascriptjqueryangularjswindow

Conceal all elements until a search query is entered using the search bar

I want to create a search bar that hides all elements until the user actually searches for them, you can check out my JSfiddle for reference: `JSfiddle Link <div id="search"> <form> <input type="text" name="search" id="m ...

javascriptjqueryhtmlcss

What could be the reason behind Cesium viewer's failure to show a model after I upload it?

My application features a 3D map of a city with an "Add building" button. Upon clicking this button, a model of a building should be inserted into the map. However, all I see is a selection marker at the intended location without the actual building appea ...

javascriptjavaangularjsspring-bootcesiumjs

What is the reason in AngularJS for requiring directive attributes to be hyphen-separated while their scope variables are camelCased?

Here is an example in Html: <!-- Note 'display-when' is hyphenated --> <wait-cursor display-when="true"></wait-cursor> Then, when defining it in the directive: scope: { // Note 'displayWhen' is camelCased show: ...

javascriptangularjs

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview

Initiate CSS animation upon modification of component properties

I am looking for a way to create a fade in/out effect on a component whenever its prop changes. Unlike basic examples that toggle styles based on boolean conditions, I want the element's visibility state to be updated directly through prop changes. F ...

javascriptcssreactjs

Ways to secure mat tab for verification

When clicking on a mat tab, I want it to display a warning asking if the user is sure. If the user selects yes, then the tab should change; otherwise, the user should remain on the same tab. However, currently, when I click on a tab, it changes before sh ...

angularangular-material

The sizing of Bootstrap Inline dropdown menus is not accurate

I want to create two dropdown menus using Bootstrap v3 that are displayed side by side with a specific width and utilizing the grid system. However, I am facing an issue where the width remains the same. Here is an example of what I mean: .menuList > ...

htmlcsstwitter-bootstrap

Unable to retrieve background position using jQuery .css() without needing !important in CSS

Could someone please explain why the jQuery .css() method is returning 0% 0% for elements with a background position defined in the inspector and style sheet? I'm puzzled as to why adding !important to the rule makes it work, but not without. The jQ ...

jquerycssdomcsom

Utilize the display property with grid to effortlessly expand a block to occupy the entire width

I am currently exploring the grid system and I have a specific challenge. I would like the third block to expand to its full width without the need for extra classes. Can this be achieved using only internal CSS? .grid { margin: 36px auto; height: ...

csscss-grid

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

The initial page of a Visual Studio ASP.NET MVC project displays the full URL

Recently, I began developing a new angularjs SPA combined with Microsoft ASP.net WEBAPI. On my server, the SPA app folder is located parallel to the APIs folder, meaning that my index file is within the app folder. To set things up, I right-clicked on the ...

c#asp.net-mvcangularjsvisual-studiosingle-page-application

Looking for an Icon to accompany the navigation bar on Bootstrap

Can anyone assist me with adding an icon next to the navbar starting from the word "Dashboard" without any spacing using only Bootstrap? Please note that I have tried options like offset-5 and ms-5 but they did not achieve the desired result. <div id=& ...

htmlcssbootstrap-5

The hover effect on <a href element will only activate after clicking or refreshing the page

Having an issue with my website where I'm using HTML and CSS exclusively. The problem arises when I have multiple "a hrefs" that should change their background colors slightly when hovered over. However, whenever I clear the browser cache or go into i ...

htmlcsshover

Retention of user-entered data when navigating away from a page in Angular

I need to find a way to keep the data entered in a form so that it remains visible in the fields even if the user navigates away from the page and then comes back. I attempted to use a solution from Stack Overflow, but unfortunately, it did not work as exp ...

javascriptangularjs

Locating an individual element using Selenide (Selenium) and the cssSelector method

If you have a structure of elements similar to the one shown in the image, it is possible to extract each static property using: $$('#static-information .value').get(0) or $$('.static-property .value').get(0) However, as each static p ...

cssselenium-webdriverelementselenide

Modify the color of the table map based on specific conditions in a React.js application

To modify the table entry's color based on the current balance, follow these conditions: If the current balance is less than 100, it should be shown in red. If the current balance is between 100 and 200, display it in yellow. Otherwise, show it in gre ...

javascriptcssreactjsreact-redux

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

cssruby-on-railsrubyerb

How do I resolve the issue of unable to align the element correctly?

I am struggling to create a hamburger menu icon and align it using flexbox. Unfortunately, the icon is not aligning properly as it is going beyond the menu and the browser screen with an odd top indent. Below is the code I have written: * { margin: 0 ...

htmlcssflexboxposition