Question

在撰写文章时，我有时需要使用没有空格的长字符串而不是单词破解和包装，这些单词将被放在他们自己的行中。这在前一句中留下了空白的巨大空白。

您可以在＆＃34; CryptoRoger如何加密受害者的文件＆＃34;中找到此示例。部分：

http://www.bleepingcomputer.com/news/security/new-ransomware-called-cryptoroger-that-appends-crptrgr-to-encrypted-files/

我还在这个小提琴中添加了一个例子：

https://jsfiddle.net/s5u53vmq/

我的CSS目前设置如下，所以单词不会溢出div而我希望破解：

.articleBody p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

我还应该使用其他任何东西，以便这些长词会破碎而不是移动到下一行吗？

Answer 1

除非您愿意使用额外的标记，否则我认为您可能符合浏览器的意愿以及它们如何处理长期的运行文本。

此解决方案还需要额外的标记，但在单词中断的位置会更加动态。虽然<wbr>和<shy>等解决方案有效，但它们要求您指定确切的地方来打破这个词。在某些情况下，这是所希望的。我的解决方案需要在您想要破解的单词周围包含一个标记，并将动态破坏它。

.inline-word-wrap {
  word-break: break-all;
}

<p>
  When the ransomware is done encrypting your files it will open the ransom 
  note called&nbsp;<strong>!Where_are_my_files!.html</strong>&nbsp;as shown 
  above. This ransom note will contain instructions stating developer at 
  the uTox address <span class="inline-word-wrap">F12CCE864152DA1421CE717710EC61A8BE2EC74A712051447BAD56D1A473194BE7FF86942D3E.</span>
</p>

您的更新JSFiddle。

Answer 2

您可以使用以下方法在长字符串中标记浏览器的断点：

以破折号打破
打破隐形

Answer 3

<shy>标记（＆＃34;软连字符＆＃34;）允许您标记允许在行（包括连字符）之间断开的单词中的位置。这样，在靠近行尾的任何位置都不会破坏单词，而只会在允许它的位置被破坏。

一个抽象示例：如果abcdef<shy>ghijkl<shy>mnopq<shy>rstuvwxyz适合于abcdefghijklmnopqrstuvwxyz，则<shy>将被写为import pandas as pd from pandas.stats.api import ols indx = [Timestamp('2015-06-01 00:00:00'), Timestamp('2015-06-02 00:00:00'), Timestamp('2015-06-03 00:00:00'), Timestamp('2015-06-04 00:00:00'), Timestamp('2015-06-05 00:00:00'), Timestamp('2015-06-06 00:00:00'), Timestamp('2015-06-07 00:00:00'), Timestamp('2015-06-08 00:00:00'), Timestamp('2015-06-09 00:00:00'), Timestamp('2015-06-10 00:00:00'), Timestamp('2015-06-11 00:00:00'), Timestamp('2015-06-12 00:00:00'), Timestamp('2015-06-13 00:00:00'), Timestamp('2015-06-14 00:00:00'), Timestamp('2015-06-15 00:00:00'), Timestamp('2015-06-16 00:00:00'), Timestamp('2015-06-17 00:00:00'), Timestamp('2015-06-18 00:00:00'), Timestamp('2015-06-19 00:00:00'), Timestamp('2015-06-20 00:00:00'), Timestamp('2015-06-21 00:00:00'), Timestamp('2015-06-22 00:00:00'), Timestamp('2015-06-23 00:00:00'), Timestamp('2015-06-24 00:00:00'), Timestamp('2015-06-25 00:00:00')] col = [51.219999999999999, 51.189999999999998, 51.210000000000001, 51.229999999999997, 51.219999999999999, 51.219999999999999, 51.219999999999999, 51.229999999999997, 51.240000000000002, 51.219999999999999, 51.200000000000003, 51.200000000000003, 51.200000000000003, 51.219999999999999, 51.219999999999999, 51.219999999999999, 51.219999999999999, 51.270000000000003, 51.280000000000001, 51.280000000000001, 51.299999999999997, 51.299999999999997, 51.280000000000001, 51.280000000000001, 51.270000000000003] df = pd.DataFrame(col,index=indx,columns=['abc']) sumstat = ols(y=df['abc'],x=df.index)标记中最接近结尾的一行（带有连字符）这条线。

Answer 4

HTML5和AFAIK中引入的<wbr>标记随处可见，表示允许破坏字符串的位置。它应该可以解决你的问题。

Answer 5

使用css -

.articleBody p{
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

另一种解决方案。使用省略号防止溢出 -

.articleBody p{
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

新单词出现在新行上，而不是使用break-word来破坏单词

5 个答案: