防止链接 - CSS的分词 [英] Prevent Word Breaks for link - CSS

问题描述

我需要一些链接，当需要 wrap 时，我想防止它们被分解。我宁愿整个链接移动到另一行，而不是链接的一半。

这里是一个示例

如果需要 word-break ，是否有任何方法让类？ （这意味着如果该类的内容将超过行，而不是破坏它，只需创建一个新行）。

我希望这是有道理的;

 < div class =box> 
这里是这个灰色框内的一些文本; < a href =＃>这里是链接< / a> ;. 
< / div> 
  

CSS

  .box {
 background：gray; 
 color：white; 
 line-height：24px; 
 padding：15px; 
 width：290px; 
} 
 .box a {
 background：aqua; 
 color：black; 
 padding：5px; 
} 
  

解决方案

href =https://developer.mozilla.org/en-US/docs/Web/CSS/white-space =nofollow> white-space：nowrap 。

更新示例

  .box a {
 white-space：nowrap; 
 background：aqua; 
 color：black; 
 padding：5px; 
} 
  

I have some links that I would like to prevent from being broken up when a wrap is needed. I would rather the whole entire link be moved to another line rather than half of the link.

Here is an example

Is there any way to make a class only break 'full' if a word-break is needed? (meaning that if the content of that class will exceed the lines, instead of breaking it, just create a new line with it).

I hope this makes sense; thank you for your time.

HTML

<div class="box">
    Here is some text within this grey box; <a href="#">And here is the link</a>.
</div>

CSS

.box {
    background: grey;
    color: white;
    line-height: 24px;
    padding: 15px;
    width: 290px;
}
.box a {
    background: aqua;
    color: black;
    padding: 5px;
}

解决方案

You are looking for white-space: nowrap.

Updated Example

.box a {
    white-space: nowrap;
    background: aqua;
    color: black;
    padding: 5px;
}

这篇关于防止链接 - CSS的分词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！