blocks|key|1534704|text|我想你的意思是，作为链接出现的词不应该被打断？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1534705|您可以在您的HTML代码中使用“非中断空间”("HTML“，以&nbsp;形式编写)，而不是在链接中使用常规空格。这样，链接本身就不会中断，正如您在本例中所看到的那样：|offset|length|style|CODE|1534706|​|1534707|<p>This+is+a+longer+sentence+which+among+some+other+words+contains+a+link+<a+href='#'>which&nbsp;consists&nbsp;of&nbsp;several&nbsp;words&nbsp;that&nbsp;should&nbsp;not&nbsp;be&nbsp;broken</a></p>|code-block|syntax|javascript|1534708|1534709|entityMap^0|0|V|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|W|8|@]|9|@]|A|$M|N]]|$1|O|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>I suppose you mean the words appearing as the link should not be broken? </p>

<p>You can use "non-breaking spaces" ("HTML entities" written as <code>&amp;nbsp;</code>) in your HTML code for this instead of regular spaces inside the link. That way the link itself will not be broken, as you can see in this example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This is a longer sentence which among some other words contains a link &lt;a href='#'&gt;which&amp;nbsp;consists&amp;nbsp;of&amp;nbsp;several&amp;nbsp;words&amp;nbsp;that&amp;nbsp;should&amp;nbsp;not&amp;nbsp;be&amp;nbsp;broken&lt;/a&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|524409|text|我不知道您想要什么，但是css方法不同：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|524410|.container+a::before+{++content:+"\A";+white-space:+pre;+}|ordered-list-item|offset|length|style|CODE|524411|.container+a+{+display:+inline-block+}|524412|.container+a+{white-space:nowrap;}|524413|第一解决方案总是在链接之前添加行中断，但是使用内联块方法，只有在需要的情况下才会添加行中断。|BOLD|524414|查看小提琴下面或上面|524415|​|524416|.linebreakbefore+a::before+{+
++content:+"\A";+
++white-space:+pre;+
}
.inlineblock+a+{+
++display:+inline-block;
}
.nowrap+a+{+
++white-space:+nowrap;
}|code-block|syntax|javascript|524417|<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>|524418|524419|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/2ob6fxc1/^0|0|0|1M|0|0|12|0|0|Y|0|0|Y|0|2|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@$E|1B|F|1C|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|1D|8|@$E|1E|F|1F|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|1G|8|@$E|1H|F|1I|G|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1J|8|@$E|1K|F|1L|G|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1M|8|@]|9|@$E|1N|F|1O|1|1P]]|A|$]]|$1|R|3|S|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1R|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|V|7|1S|8|@]|9|@]|A|$W|X]]|$1|10|3|S|5|6|7|1T|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]]]

<p>I'm not sure to understand what you want but there is differents css approachs:</p>

<ol>
<li><code>.container a::before {  content: "\A"; white-space: pre; }</code></li>
<li><code>.container a { display: inline-block }</code></li>
<li><code>.container a {white-space:nowrap;}</code></li>
</ol>

<p><strong>First solution always add a line break before a link, but with inline-block approach the line break is added only if needed</strong></p>

<p>Take a look below or on <a href="https://jsfiddle.net/2ob6fxc1/" rel="nofollow noreferrer">jsfiddle</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.linebreakbefore a::before { 
  content: "\A"; 
  white-space: pre; 
}
.inlineblock a { 
  display: inline-block;
}
.nowrap a { 
  white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="linebreakbefore"&gt;
Collaboratively create economically sound niches before state of the art "outside the box" thinking. &lt;a href="#"&gt;Enthusiastically generate fully researched&lt;/a&gt; opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
&lt;/p&gt;
&lt;p class="inlineblock"&gt;
Collaboratively create economically sound niches before state of the art "outside the box" thinking. &lt;a href="#"&gt;Enthusiastically generate fully researched&lt;/a&gt; opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
&lt;/p&gt;
&lt;p class="nowrap"&gt;
Collaboratively create economically sound niches before state of the art "outside the box" thinking. &lt;a href="#"&gt;Enthusiastically generate fully researched&lt;/a&gt; opportunities with dynamic growth strategies. Enthusiastically extend client-centered communities vis-a-vis optimal expertise. Uniquely grow business ideas through user friendly best.
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to figure out how I can force a line-break before a link if it will keep the link from having to be wrapped on the new line. </p>

<p>In other words, let's say I'm displaying my inline link on a narrow device like a phone in portrait mode. I have a few words of text, then a longish link. If the link follows the initial words on the same line, the link will need to be wrapped to keep it from overflowing the container but if I can force a line-break <strong>before</strong> the link starts, it may (or may not) appear unwrapped on the newline. (If it still has to wrap on the new line, that's okay; I'm trying to handle the (many) cases where this approach will prevent any need to wrap the link.) </p>

<p>I haven't any idea how to accomplish this without writing programming code and even then I'm not entirely sure. Is it even possible? I'd far rather do it with CSS if it's possible. </p>

<p>It would seem to require the rendering engine to know what the width of the device is and to realize that the upcoming link won't fit without wrapping and then generate a line-break to handle it.</p>


How can I force a line break before a long link?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图弄清楚如何在链接之前强制换行，如果这样可以避免将链接包装在新的行上。换句话说，假设我在一个狭小的设备上显示我的内联链接，比如在纵向模式下的手机。我有几个字的文字，然后是一个长链接。如果链接跟随同一行的初始单词，则需要包装链接以防止其溢出容器，但如果我可以在链接启动前强制换行，则该链接可能(或不可能)出现在换行符上...

问怎样才能在长链之前强行断线？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问怎样才能在长链之前强行断线？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问怎样才能在长链之前强行断线？
EN