html – 如何模仿分词:破解词;适用于IE9,IE11和Firefox

前端之家收集整理的这篇文章主要介绍了html – 如何模仿分词:破解词;适用于IE9,IE11和Firefox前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何模仿断言:断言;对于IE9,IE11和Firefox?

它似乎适用于Chrome.我已经了解并理解它只是一个非标准的webkit.

仅供参考,我尝试过使用,

  1. white-space: pre-wrap;

而更像是,

  1. overflow-wrap: break-word;

还尝试了下面提到的CSS,

  1. word-wrap: break-word;
  2. word-break: break-word;

但这些似乎不起作用.

I can’t provide fixed width to the span(which contains the text) by making it display: block; explicitly as the text is dynamic and will differ according to the user’s Geo-location. Currently we support around 18 languages.

这是代码的外观,

HTML,

  1. <div id="grid2">
  2. <span id="theSpan">Product Support</span>
  3. </div>

CSS,

  1. #theSpan{
  2. white-space: pre-wrap; /* CSS3 */
  3. white-space: -moz-pre-wrap; /* Firefox */
  4. white-space: -pre-wrap; /* Opera 7 */
  5. white-space: -o-pre-wrap; /* Opera 7 */
  6. word-wrap: break-word; /* IE */
  7. word-break: break-all;
  8. }
  9.  
  10. #grid2{
  11. width: 100px;
  12. }

看起来像这样,

我希望它像,

请注意:
我不得不使用word-break:break-all;至于某些语言,翻译后的文本太长而且溢出了网格. “产品支持”一词是动态的.

更新:
我有一个固定宽度的div,id为grid2.在其中一种语言中,翻译的文本太长,它是一个单词,它流出grid2 div.

也更新了代码.

解决方法

我在Chrome,Firefox和IE上取得了很好的成功,仅使用:
  1. word-break: break-word;
  2. word-wrap: break-word;

在我的问题情况下,我已经在使用:

  1. display: table-cell;

我最终不得不包括在内

  1. max-width: 440px;

在所有浏览器中包装.在大多数情况下,最大宽度不是必需的.

猜你在找的HTML相关文章