时间戳

首页 > 解决方案 > 如何在长链接之前强制换行？

html - 如何在长链接之前强制换行？

问题描述

我试图弄清楚如何在链接之前强制换行，如果它可以防止链接必须被换行。

换句话说，假设我在像手机这样的窄设备上以纵向模式显示我的内联链接。我有几句话的文字，然后是一个较长的链接。如果链接跟随同一行的初始单词，则需要包装链接以防止其溢出容器，但如果我可以在链接开始之前强制换行，它可能（或可能不会）显示为未包装换行符。（如果它仍然必须换行，那没关系；我正在尝试处理这种方法将阻止任何需要换行链接的（许多）情况。）

我不知道如何在不编写编程代码的情况下完成此操作，即便如此我也不完全确定。甚至可能吗？如果可能的话，我宁愿用 CSS 来做。

似乎需要渲染引擎知道设备的宽度是多少，并意识到即将到来的链接如果不换行将不适合，然后生成一个换行符来处理它。

标签： htmlcss

解决方案

我不确定你想要什么，但有不同的 css 方法：

  1. .container a::before { content: "\A"; white-space: pre; }
  2. .container a { display: inline-block }
  3. .container a {white-space:nowrap;}

第一个解决方案总是在链接之前添加一个换行符，但是使用 inline-block 方法，只有在需要时才添加换行符

看看下面或jsfiddle：

.linebreakbefore a::before { 
  content: "\A"; 
  white-space: pre; 
}
.inlineblock a { 
  display: inline-block;
}
.nowrap a { 
  white-space: nowrap;
}
<p class="linebreakbefore">
Collaboratively create economically sound niches before state of the art "outside the box" thinking. <a href="#">Enthusiastically generate fully researched</a> opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
</p>
<p class="inlineblock">
Collaboratively create economically sound niches before state of the art "outside the box" thinking. <a href="#">Enthusiastically generate fully researched</a> opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
</p>
<p class="nowrap">
Collaboratively create economically sound niches before state of the art "outside the box" thinking. <a href="#">Enthusiastically generate fully researched</a> opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
</p>

推荐阅读