根据第一行

Question

我有一个主标题和描述的链接，我想根据第一行的宽度包装描述行。我可以通过仅使用CSS实现这一目标吗？

我有以下代码：

<a href="http://google.com">
  <span class="ht">Oficiální stránky</span>
  <span class="hb">Podívejte se na oficiální web festivalu</span>
</a>

https://jsfiddle.net/kybernaut/9uh24zns

期望的输出：

注意：第一个粗体标题的宽度不同的行中会有更多链接。

Answer 1

这是实现这种效果的偷偷摸摸的方式。

.limit {
   border: 1px solid red;
  display: table;
  width: 1%;
  
}

.ht {
  color: black;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap; /* stop text wrapping */
}

.hb {
  color: #555;
  font-size: 18px;
  display: block;
}

<a href="http://google.com" class="limit">
  <span class="ht">Oficiální stránky</span>
  <span class="hb">Podívejte se na oficiální web festivalu</span>
</a>

Answer 2

您可以尝试使用CSS table + table-caption解决方案。

＆＃13;

＆＃13;

.container {
  display: table;
}
.hb {
  display: table-caption;
  caption-side: bottom;
}

＆＃13;

<a class="container" href="#">
  <span class="ht">FIRST LINE</span>
  <span class="hb">second line some example content here</span>
</a>

＆＃13;

＆＃13;

＆＃13;

<强> jsFiddle

Answer 3

您可以使用

  

自动换行属性，但主流浏览器都不支持文本换行属性。

＆＃13;

＆＃13;

.ht {
  color: black;
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.hb {
  color: #555;
  font-size: 18px
}
#wrapDiv{
  width: 190px;
  word-wrap: normal
}

＆＃13;

<div id="wrapDiv">
  <a href="http://google.com">
  <span class="ht">Oficiální stránky</span>
  <span class="hb" >Podívejte se na oficiální web festivalu</span>
</a>
</div>

＆＃13;

＆＃13;

＆＃13;

您也可以参考，它与How to word wrap text in HTML?

相同