Question

我们如何解释这些链接超过200px宽度：

.small { background-color: red; width: 200px; }
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }

<div class="small">
<a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a>
</div>

然而，如果我们在每个</a>之后添加换行符，则不会：

.small { background-color: red; width: 200px; }
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }

<div class="small">
<a class="date" href="blah">2 January 2017</a>
<a class="tag" href="blah">#foooooo</a>
<a class="tag" href="blah">#foooooo</a>
<a class="tag" href="blah">#foooooo</a>
<a class="tag" href="blah">#foooooo</a>
<a class="tag" href="blah">#foooooo</a>
<a class="tag" href="blah">#foooooo</a>
</div>

通常的良好做法是什么，不被困在这种角落的情况下？

Answer 1

这是因为您没有在锚点之间留下空白区域，因此浏览器没有打破字符串的点。在锚之间添加一些空间应该有效：

let myCondition = index === $('#preferred-contact').prop('selectedIndex') && !$(selector).val();

if (myCondition && !$(label).parent().hasClass('has-error'))
{
    $(selector).after("<span class='help-block form-error'>Required Field</span>");
    $(label).parent().addClass('has-error');
}
else if (!myCondition)
{
    $(selector + ' + .help-block').remove();
    $(label).parent().removeClass('has-error');
}

.small { background-color: red; width: 200px; }
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }

Answer 2

由于a代码之间没有空格，浏览器无法在新行中破解a代码。您可以使用word-wrap (more...)或{{1 }} (more...)。

A）使用word-break：

word-wrap

.small { background-color: red; width: 200px;word-wrap: break-word;};
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }

B）使用<div class="small"> <a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a> </div>：

word-break

.small { background-color: red; width: 200px;word-break: break-all;};
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }

C）其他方式是在<div class="small"> <a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a> </div>代码之间加一个空格。

.small { background-color: red; width: 200px;};
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;}

Answer 3

为内联元素设置a{display:inline-block;}

＆＃13;

.small { background-color: red; width: 200px; }
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;  }
a{
display:inline-block;}

＆＃13;

<div class="small">
<a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a>
</div>

＆＃13;

Answer 4

如果你添加

width:100%;
display:inline-block;

到.tag类，链接将保持在.small父div的范围内。

.small { background-color: red; width: 200px; }
.tag { background-color: rgba(0,0,0,.05); margin-right: 10px;width:100%;display:inline-block;  }

<div class="small">
<a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a>
</div>

Answer 5

display:block;会做你需要的魔法

＆＃13;

    .small { background-color: red; width: 200px; }
    .tag {
      background-color: rgba(0,0,0,.05);
      /*margin-right: 10px;*/ /* Remove Margin from Right*/
      display:block; /* Line Break in CSS */
    }

＆＃13;

    <div class="small">
    <a class="date" href="blah">2 January 2017</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a><a class="tag" href="blah">#foooooo</a>
    </div>

＆＃13;

为什么这些链接超出宽度？

5 个答案: