容器中的文本溢出

Question

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

这是问题的照片：

我创建了一个JSFiddle的问题：https://jsfiddle.net/e9uv08wh/6/

    
    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;
}

<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>

谢谢。

小的时候想要的结果：

Answer 1

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

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

Answer 2

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

CAUTION: i added body width to 40vh to reproduce a smalle screen.

希望对您有所帮助:)

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>

Answer 3

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

我会像这样重建你的 HTML & 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/

容器中的文本溢出

Text overflow in container

html

css

text

overflow