如何根据行溢出将按钮列表转换为单选按钮？

Question

PLAYGROUND

给定一个容器，我想在一行中显示一个按钮列表。

但是，如果一行 space 不足以包含所有按钮，我想改为显示单选按钮。

例如，这个：

应该变成：

但是，这个：

应该保持原样。

仅使用 CSS 是否可以实现此目的？

如果没有，您将如何使用 Javascript 来做到这一点？

PLAYGROUND

Answer 1

Jquery解决方案

var num=$('.one button').length
var count=0;
for(var x=0;x < num;x++){
   count=count+parseInt($('.one button').eq(x).width()) + parseInt($('.one button').eq(x).css('padding-left')) + parseInt($('.one button').eq(x).css('padding-right'))
}
if(count > $('.one').width()){
    $('.one button').each(function(){
        var val=$(this).text();
        $(this).replaceWith('<input type="radio"  />'+val+'</br>')
    })
}

.container {
  padding: 20px;
  border: 1px solid black;
}
.one{
   width:200px; 
}
.one button{
    display:inline-block;
}
.one radio{
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container one">
    <button>Yes,</button>
    <button>it</button>
    <button>is</button>
    <button>possible</button>
    <button>to</button>
    <button>achieve</button>
    <button>this</button>
  </div>
  <div class="container">
    <button>What</button>
    <button>do</button>
    <button>you</button>
    <button>think?</button>
  </div>
</body>

您可以更改 .one 的宽度以查看变化

Answer 2

举个例子

jQuery(document).ready(function($){
  var parentElm = $('.parent');
  var parentWidth = parentElm[0].offsetWidth;

  var buttons = parentElm[0].children;
  var buttonsWidth = 0;
  for (var i = 0; i < buttons.length; i++){
    buttonsWidth += buttons[i].offsetWidth;
  }
  var buildRadio = '';
  if (buttonsWidth > parentWidth){
    for (var i = 0; i < buttons.length; i++){
      var value = buttons[i].innerText;
      buildRadio += '<input type="radio" name="something" value="' + value + '">' + value + '<br>';
    }
    parentElm.html(buildRadio);
  }

});

像这样的东西

<div class="parent">

  <button>Hello</button>
  <button>World</button>
  <button>Cool</button>
  <button>Stuff</button>

</div>

Answer 3

您可以将 div 克隆到临时 div。然后你可以将 temp div 更改为 no-wrap，invisible。然后可以比较temp的innerWidth和scrollWidthdiv来检测文字是否溢出

$('#div1').clone().attr('id','tempDiv').css('white-space','nowrap').css('overflow','auto').appendTo(document.body).css('visibility','hidden');

if ($('#tempDiv').innerWidth() != $('#tempDiv')[0].scrollWidth) {
  alert('OK');
}

http://jsbin.com/heridapeqa/1/edit?html,css,js,console,output

Answer 4

在 CSS 中不可能。

在 JavaScript 中不太难。

首先，将此样式添加到.container:

white-space: nowrap;

JavaScript

var cont= document.querySelectorAll('.container');

for(var i = 0 ; i < cont.length ; i++) {
  if(cont[i].scrollWidth > cont[i].clientWidth) {
    var buttons= cont[i].querySelectorAll('button');
    for(var j = 0 ; j < buttons.length ; j++) {
      var div= document.createElement('div');
      div.innerHTML= 
       '<label>'+
         '<input type="radio" name="button'+i+'">'+buttons[j].innerHTML+
       '</label>';
      cont[i].insertBefore(div, buttons[j]);
      buttons[j].remove();
    }
  }
}

Updated JS Bin

如何根据行溢出将按钮列表转换为单选按钮？

How to convert list of buttons to radio buttons based on row overflow?

html

javascript

css

overflow