Question

我试图找出如何使文本和我的箭头不会溢出到下一个单元格。我试过给它一个最小宽度，但似乎没有用。我知道当它变得那么小时我可能不得不使用媒体查询，但是如果有人知道我必须做什么，当它很小以至于它不会溢出时，这将有所帮助。

这是问题的照片：

我创建了一个问题的JS小提琴：https://jsfiddle.net/e9uv08wh/6/

＆＃13;

    
    a{
      
      
          color: #544f47;
    height: 3.4em;
    font-weight: normal;
    padding-left: 1em;
    border-bottom: .0625em solid #544f47;
    line-height: 3.4em;
    display: block;
  

         
}

i.fa.fa-chevron-right {
  float: right;
         margin-right: .5em;
         padding-top: .3em;
          line-height:3em;
}

＆＃13;

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


</div>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span> 
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

＆＃13;

谢谢。

小时的理想结果：

Answer 1

有很多方法可以实现您的目标。将overflow: hidden应用于div会阻止溢出，但这不是最佳解决方案。

我会重建您的HTML＆amp;像这样的CSS：

<div class="border"><a class="newnav" href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Google Google Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i></div>
<div class="border"><a href="https://www.google.com/">Submit to Google</a><i class="fa fa-chevron-right"></i> </div>
<div class="border"><a href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i> </div>
<div class="border"><a class="newnav" href="https://www.google.com/">Google</a><i class="fa fa-chevron-right"></i> </div>

.border {
  height: 55px;
  border-bottom: .0625em solid #544f47;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 a { 
    color: #544f47;
    font-weight: normal;
    padding-left: 1em;
    display: block;
}

i.fa.fa-chevron-right {
  display: block;
  margin-right: .5em;
  padding-top: .3em;
  line-height:3em;
}

你可以在这个jsfiddle中看到它的表现： https://jsfiddle.net/95cgh68n/1/

使用div作为flexboxes可以设置您希望如何排列子元素。此解决方案至少应该减少您需要使用的媒体查询数量。

如果您不熟悉弹性框，这是一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

要停止溢出，可以使用css div.border{overflow:hidden}，但您可能希望重构html，只隐藏文本并始终显示箭头。

此外，您使用<span>标记来描绘您的行。你应该使用DIV - 因为跨度是设计内联标签，你似乎想要打破行，这是DIV所做的。将跨度更改为div。

Answer 3

如果您不想更改css，可以将overflow: hidden应用于<a>代码

注意：我将体宽增加到40vh以重现较小的屏幕。

希望这会有所帮助：）

a {
  color: #544f47;
  height: 3.4em;
  font-weight: normal;
  padding-left: 1em;
  border-bottom: .0625em solid #544f47;
  line-height: 3.4em;
  display: block;
  overflow: hidden;
}

i.fa.fa-chevron-right {
  float: right;
  margin-right: .5em;
  padding-top: .3em;
  line-height: 3em;
}

body {
  width: 40vh;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


</div>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Google Google Google<i class="fa fa-chevron-right"></i></a></div> </span>
<span><div class="border"><a href="https://www.google.com/">Google <i class="fa fa-chevron-right"></i></a></div></span>
<span><div class="border"><a href="https://www.google.com/">Submit to Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>
<span><div class="border"><a class="newnav" href="https://www.google.com/">Google<i class="fa fa-chevron-right"></i></a> </div></span>

容器中的文本溢出

3 个答案: