How to Use Text-Overflow: Ellipsis on a Button Element

Button element does not respect text-overflow: ellipsis container

That's because buttons are replaced elements. They can't be displayed inline, your display: inline in fact behaves like display: inline-block. This is indeed determined by the spec:

A non-replaced element with a 'display' value of 'inline' generates an
inline box. Inline-level boxes that are not inline boxes (such as
replaced inline-level elements, inline-block elements, and
inline-table elements) are called atomic inline-level boxes because
they participate in their inline formatting context as a single opaque
box.

So you need to set text-overflow directly to the button, which is the block container.

.text-overflow-ellipsis {  border: 1px solid black;  padding: 10px;  width: 250px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.link-button {  box-sizing: content-box;  display: inline;  font: inherit;  background: none;}a, button {  cursor: pointer;}

<div class="text-overflow-ellipsis">  <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>      </div><div>  <button class="link-button text-overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>      </div>

insert button to the end of layer styled text-overflow:ellipsis

I've just found javascript library for adding more button after ellipsis(...).

http://dotdotdot.frebsite.nl

it supports the option, jQuery.dotdotdot({ 'after': '.classname' }) for add button.

how to add ellipsis to a String inside button angularjs

 <html>
    <head>
    <script src="angular.min.js"></script>

    <script src="script.js"></script>
    <link rel="stylesheet" href="tree.css"/>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body data-ng-app="testApp" data-ng-controller="button">

    <hr>
    <button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
    <button class="chipbtn" type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>

    <button ng-repeat="name in listofSystems" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" id="{{name.name}}" ng-click="addSystemsButton($event,$index)"><span style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">{{name.name}} </span>    <span style="color:red;vertical-align: top;">+</span></button>

    <hr>
    <p><strong>Selected Systems</strong></p>
    <button ng-repeat="name in listofSystemsAdded" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" ng-click="removeSelectedSystemsButton($index)"> <span style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">{{name.name}} </span>  <span style="color:red;vertical-align: top;">+</span></button> 

    </body>
    </html>

added plus symbol also check demo here

Text overflowing out of button instead of moving to the next line

Well the bootstrap applies white-space: nowrap to all the .btn class to wrap the button text in a single line...

So you will need to change this to white-space: normal by using a parent selector of yours so that it won't affect on all other buttons.

Also Element p not allowed as child of element button in this context..So better to use <br> instead of <p> if you want text on next line

Also The element button must not appear as a descendant of the a element...so use btn btn-info btn-block classes on <a> and remove button

#final .btn{
  white-space: normal;
}

body {  background-color: #c0c0c0;}
#final .btn {  white-space: normal;}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"><div class="container-fluid" style="text-align : center">  <div id="final">    <div>      <a href="#" target="_blank" style="text-decoration: none;" class="btn btn-info btn-block">        <b>Heading which is okay</b><br> And this is some really really very long text which is not fitting inside my button tag and is overflowing out of the button. But this text is meant to be a small description of the heading. Lorem ipsum dolor sit        amet, consectetur adipiscing elit. Morbi auctor iaculis enim eu ultrices. Pellentesque nec hendrerit mauris.      </a>    </div>    <div id="search-result"></div>  </div></div>

Truncate text overflow but leaving space for button

You could wrap with some parent component inside the div like this .And add the parent component display:flex.

table,tr,td {  border: 1px solid black;}
table {  table-layout: fixed;  width: 100%;}
td div {  display: flex;  align-items: center;}
td div p {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}button{ width:30px; height:30px;}

<table>  <tr>    <td>      <div>        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>        <button>📋</button>      </div>    </td>    <td>      <div>        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>        <button>📋</button>      </div>    </td>  </tr></table>

Text extends outside button HTML

If you want to truncate the text and add ellipsis, you could add overflow: hidden to clip the text, and then use text-overflow: ellipsis to add the '... ' ellipsis:

Updated Example

button.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Sample Image

Button with ellipsis on a label, sized by parent

Button width is based on its content or parent element. You need to modify some styles to achieve ellipsis content:

<PrimaryButton
  ...
  styles={{
    textContainer: {
      overflow: 'hidden',
    },
    label: {
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
    }
  }}
/>

Codepen working example.

Useful links:

MDN Text Overflow

Fluent UI Styling Guide