css单词包装：破解单词不起作用 [英] css word-wrap: break-word won't work

问题描述

我有两个内联跨度。代码示例：

 < div class =comment_content> 
 
< span class =comment_author><？= $ child_comment ['comment_author']？>< / span> 
< span class =comment_text><？= $ child_comment ['comment_content']？>< / span> 
 
< / div> 
  

和scss示例：

  .comment_content {
 word-wrap：break-word; 
} 
 .comment_author {
 display：inline-block; 
 vertical-align：top; 
} 
 .comment_text {
 display：inline-block; 
 word-wrap：分词; 
宽度：100％; 
} 
  

如果我期望的视图必须是：

如何正确打破长长的单词？

解决方案

为了正确地打破长词，它需要结合几个CSS属性，我建议定义和应用这样的助手类：

  .break-long-words {
 overflow-wrap：break-word; 
 word-wrap：分词; 
 word-break：全部破解; 
单词分词：分词; 
连字符：auto; 
 
 
 
 
 
 
属性解释：
 
 
 
 
  overflow-wrap 和自动换行  aliases ，但一些浏览器支持一个而不支持另一个，所以我们都需要它们。他们
是正确的方式来打破单词，但它们对动态宽度的元素没有任何影响，所以我们需要更多... 
 
 
  break 最初是为了要求CJK（中文，日文和韩文）文本的特定行为，但其功能类似于
单词换行，但是在WebKit中，break-all值会打破所有内容。出于这个原因，我们必须使用非标准的，价格低廉的
记录的仅限于WebKit的分词价值。
 
 
以及可选的，如果中断字有超时的意义。对于它可能不存在的URL），我们可以在
支持它们的浏览器中使用超级版本（目前是Firefox，Safari，Edge和IE 10+）。另外请注意，在Firefox中，如果您拥有word-brake 
属性，hypens不起作用，所以除非您有固定宽度的容器，否则您必须在FF或旧版支持的超级版本之间作出选择。
 
 
 
 
 
请注意，我忽略了供应商前缀，但是如果您不使用Autoprefixer之类的东西，那么这是完全版本版本： 
 
 
  .break-long-words {
 overflow-wrap：break-word; 
 word-wrap：分词; 
 -ms-word-break：break-all; 
 word-break：全部破解; 
单词分词：分词; 
 -ms-hyphens：auto; 
 -moz-hyphens：auto; 
 -webkit-hyphens：auto; 
连字符：auto; 
} 
  
 
I have two inline span. code sample:
    <div class="comment_content">

        <span class="comment_author"><?= $child_comment['comment_author'] ?></span>
        <span class="comment_text"><?= $child_comment['comment_content'] ?></span>

    </div>
And scss sample:
.comment_content {        
    word-wrap: break-word;
}
.comment_author {
    display: inline-block;
    vertical-align:top;
}
.comment_text {            
    display: inline-block;
    word-wrap: break-word;
    width: 100%;
}
If my expected view has to be: 


If user enters string without spaces, string won't break. And breaks design: 

How properly break long words ??
解决方案
To properly break long-words it requires to combine several CSS properties, I would suggest defining and applying helper class like this:
.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}
Properties explained:  


overflow-wrap and word-wrap are aliases for same thing but some browsers support one and not the other so we need them both. They
are offical "correct" way to break words but they don't have any effect on elements with dynamic width so we need more...
word-break is originally intended for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text but works similar to
word-wrap but in WebKit break-all value breaks everything and everywhere. For that reason we must use non-standard and poorly
documented WebKit-only break-word value.
and optionally, if it makes sense for break words to have hypens (ie. for URLs it probably doesn't) we can use hypens in browsers that
support them (at the moment Firefox, Safari, Edge and IE 10+). Also note that in Firefox hypens don't work if you have word-brake
property so unless you have fixed-width container you must choose between hypens on FF or legacy support.


Note that I omitted vendor prefixes but if you don't use something like Autoprefixer than this is full verison:
.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


                        
这篇关于css单词包装：破解单词不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！