Question

是否有CSS样式或JS库可用于防止二线问题上出现奇怪的单词？例如，假设一个div完美地符合这句话：

Sign up now and start today!

但是当翻译成法语时，看起来像这样：

Inscrivez-vous et commencer
        maintenant!

我希望将句子平分，如下：

Inscrivez-vous et
commencer maintenant!

我无法随意使用换行符管理这些内容，我需要一个只修复它们的CSS或JS库。

Answer 1

将文本放在范围内，然后使用css设置范围的最大宽度。不确定你是如何使用javascrip的，但以下内容应该让你知道如何去做。

HTML

<span class='texttotranslate'>text to be translated</span>

CSS

.texttotranslate
{
display: inline-block;//maybe
max-width: 100px;//whatever
}

Answer 2

您可以通过编程方式（即使用JavaScript）将所有html元素中的所有最终空格转换为非破坏空格。

运行下面的代码片段并重新调整窗口大小以查看换行的效果：您永远不会在段落的最后一行（或长标题或其他）上看到单个单词。在此代码中，您可以选择要定位的元素，例如只是段落，或div和段落等，通过为要修改的元素的标签创建一个包含css表示法的字符串。请注意，在代码中使用<span>元素仅用于演示目的。在现实生活中，不要理会。

为了给予信用到期的信用，当我正在研究这个答案时，SO贡献者QBM5也建议以这种方式使用不间断的空格。

＆＃13;

var htmlTagsToModify = "h1, h2, div, p, li";

$(document).ready(function() {
  
  $("button").click(function() {
    $("span").toggleClass("show");
  });
  
  // $(htmlTagsToModify).css({ 'color': 'red' }); 
  $(htmlTagsToModify).each(function(idx, elem) {
    var content = $(elem).html();
    
    var lastSpace = "<span>&nbsp;</span>"; // just use this line for demonstration purposes
    // var lastSpace = "&nbsp;"; // use this line in actual implementations
    
    var modifiedContent = content.replace(/\s+(\S+\s*$)/, lastSpace + "$1");
    $(elem).html(modifiedContent);
  });
});

＆＃13;

span.show {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle highlighting of last spaces</button>
<p>Resize this window to observe line-wrapping.</p>

<h1>Lorem ipsum dolor sit amet, est ex soleat deseruisse, cu alia fabulas sit. Et usu aliquid sanctus laboramus.</h1>

<div>Est oporteat principes dissentias cu, ad nec essent invidunt. Illud labore fierent et sea. Sit rebum veritus prodesset ea, vix te duis everti nusquam. Vis ei ludus detracto, vix nihil dicunt facilisi eu. Ut alterum propriae per, tritani consetetur no usu. Eloquentiam disputationi id quo, illud etiam has an.</div>

<h2>Mea ad accusam offendit. Facer convenire his no, causae reprehendunt pri ne. Vim iriure labitur sensibus an.</h2>

<p>Albucius concludaturque vel at. Vocent animal graecis cum et, noluisse principes an quo. Primis minimum cu pro, sit ponderum lobortis mandamus te, ad vis movet equidem. Inermis oporteat aliquando at eam, duo veritus vivendo iudicabit in, ne vitae ubique delicata eam.</p>

<ul>
  <li>Civibus ullamcorper conclusionemque usu at, ignota noster virtute cu his. Id quo ipsum feugait, erat euismod lucilius ut pri, pri at adhuc aliquid adipiscing. Ius te habeo suavitate neglegentur, in ius tota probo. Ut atqui aperiam accusam ius, ludus sadipscing no ius. Cum congue audire ad, at dicat novum meliore his, pri et delenit dissentiunt. Vix mandamus consulatu ut.</li>

  <li>Vide contentiones ad ius, id ipsum meliore nominati duo. Clita scaevola invidunt no has. Eam facete suscipit ut. Duo alterum antiopam philosophia cu, ex eos delicata tractatos. Qui regione meliore ea.</li>
</ul>

＆＃13;

我可以自我换行以防止二线问题上出现奇怪的一个字吗？

2 个答案: