小编Sea*_*ass的帖子

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});

.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky-header:first-child {
  left: 0;
  z-index: 4;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px; /* This seems to work differently for Safari, FF, Chrome etc. Here adjusted for FF */ …

$('a').on('click', function(e) {
  $('div').not('.' + $(this).data('class')).hide('slow');
  $('.' + $(this).data('class')).slideToggle();
});

a {
 display: block;
}
 div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-class="a">Show all A's</a>
<div class="a">A</div>
<div class="a">A</div>
<div class="a">A</div>
<a href="#" data-class="b">Show all B's</a>
<div class="b">B</div>
<div class="b">B</div>

a {
 display: block;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
<section x-data="{ letter: '' }">
    <a href="#" @click.prevent="letter = (letter === 'a' ? '' : 'a')">Show all A's</a>
    <div x-show.transition.in="letter === …

// Paste fix for contenteditable
$(document).on('paste', '[contenteditable]', function (e) {
    e.preventDefault();

    if (window.clipboardData) {
        content = window.clipboardData.getData('Text');        
        if (window.getSelection) {
            var selObj = window.getSelection();
            var selRange = selObj.getRangeAt(0);
            selRange.deleteContents();                
            selRange.insertNode(document.createTextNode(content));
        }
    } else if (e.originalEvent.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');
        document.execCommand('insertText', false, content);
    }        
});

div {
  white-space: pre-wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">Copy
and
paste
this
back in the same box or the one below. …

body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

colgroup {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569CA8;
  color: white;
  z-index: 1;
}

<div>
  <table cellspacing="0">
    <tbody>
      <tr>
        <colgroup>
          <td>Sticky 1</td>
          <td>Sticky 2</td>
          <td>Sticky 3</td>
        </colgroup>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <colgroup>
          <td>Sticky 1</td>
          <td>Sticky 2</td>
          <td>Sticky 3</td>
        </colgroup>
        <td>Column 4</td> …

$("input").on('blur', function(e) {
  $(this).get(0).setSelectionRange(0,0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">