Question

我正在尝试使用标签和图标来实现自定义按钮问题是，如果标签文字太长，它就会溢出我的目标是使用CSS使按钮响应，基于标签文本宽度。

这是我到目前为止所做的：jsFiddle

.btn_container{
    position: relative;
    background-color: green;
    height: 40px;
    width: 100px;
}

.btn_label{
    position: relative;
    background-color: red;
    width: 70%;
    height: 100%;
    float:left;
}

.btn_icon{
    position: relative;
    background-color: blue;
    width: 30%;
    height: 100%;
    float: right;
}

label{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn_container">
  <div class="btn_label">
    <label>Text i want to fit in the div...</label>
  </div>
  <div class="btn_icon">
    <i class="fa fa-plus"></i>
  </div>
</div>

问题是，如果标签文本溢出，应根据标签文本宽度拉伸“btn_label”和“btn_container”宽度。

我该如何实现？

Answer 1

您在小提琴中共享的代码存在一些问题

如果要拉伸父div（.btn_container），为什么要设置宽度：100px？使用width:auto
不要使用float:left这会导致元素超出文档的默认流程，因此您需要将宽度设置为btn_container，这是您不想要的
如果您对文字使用position:absolute，则其他元素永远不会考虑其宽度。因此，如果您希望它的父级具有宽度取决于它的宽度，请避免使用position：absolute

使用下面的解决方案或jsFiddle

.btn_container {
  position: relative;
  background-color: green;
  height: 40px;
  width: auto;
  display: inline-block;
}
.btn_label {
  position: relative;
  background-color: red;
  width: auto;
  height: 100%;
  display: inline-block
}

.btn_icon {
  position: relative;
  background-color: blue;
  width: auto;
  height: 100%;
  display: inline-block;
}

label {}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn_container">
  <div class="btn_label">
    <label>Text i want to fit in the div...</label>
  </div>
  <div class="btn_icon">
    <i class="fa fa-plus">+</i>
  </div>
</div>

Answer 2

你应该用@media（min-width或max-width）制作一个分手点。在较小的分辨率上，第二个按钮会显示下方并使用较少的文本。

或者让文字溢出：隐藏;和白色空间：nowrap;

你不能把40px的高度和大量的文字放在桌面上就可以了，但是在手机上文字必须去某处或者用溢出来隐藏它。

如何根据标签文本长度拉伸容器宽度？

2 个答案: