Question

我有一些 的内容，但它没有正确包装。所以我唯一的解决方案就是使用word-break: break-all，但它也会分裂这个词。我猜 被对待就像一封信？那么有没有办法以不同的方式处理 以便它可以被打破而不是这样的单词呢？

table{
  table-layout: fixed;
  border: 1pt solid;
}
.wrapme{
  white-space: wrap;
  word-wrap: break-word;
  word-break: break-all;
}

<div class="wrapme">
  <table>
    <tbody>
      <tr>
        <td>
          LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
        </td>
      </tr>
    </tbody>
  </table>
</div>

请在这里查看https://jsfiddle.net/j6hpovbo/

 

中解释了" "和

eclipse.buildId=4.5.1.M20150904-0015
java.version=1.8.0_66
java.vendor=Oracle Corporation
BootLoader constants: OS=win32, ARCH=x86_64, WS=win32, NL=en_US
Framework arguments:  -product org.eclipse.epp.package.java.product
Command-line arguments:  -os win32 -ws win32 -arch x86_64 -product org.eclipse.epp.package.java.product

org.eclipse.m2e.logback.appender
Error
Tue Jan 12 13:08:37 CET 2016
Unable to update index for central|https://repo.maven.apache.org/maven2

java.lang.NullPointerException
    at org.apache.lucene.store.IndexOutput.writeString(IndexOutput.java:102)
    at org.apache.lucene.index.SegmentInfo.write(SegmentInfo.java:504)
    at org.apache.lucene.index.SegmentInfos.write(SegmentInfos.java:307)
    at org.apache.lucene.index.SegmentInfos.prepareCommit(SegmentInfos.java:761)
    at org.apache.lucene.index.IndexWriter.startCommit(IndexWriter.java:4636)
    at org.apache.lucene.index.IndexWriter.commit(IndexWriter.java:3369)
    at org.apache.lucene.index.IndexWriter.closeInternal(IndexWriter.java:1654)
    at org.apache.lucene.index.IndexWriter.close(IndexWriter.java:1602)
    at org.apache.lucene.index.IndexWriter.close(IndexWriter.java:1578)
    at org.apache.maven.index.context.NexusIndexWriter.close(NexusIndexWriter.java:58)
    at org.apache.maven.index.context.IndexUtils.close(IndexUtils.java:376)
    at org.apache.maven.index.updater.DefaultIndexUpdater.unpackIndexData(DefaultIndexUpdater.java:529)
    at org.apache.maven.index.updater.DefaultIndexUpdater.loadIndexDirectory(DefaultIndexUpdater.java:212)
    at org.apache.maven.index.updater.DefaultIndexUpdater.access$300(DefaultIndexUpdater.java:75)
    at org.apache.maven.index.updater.DefaultIndexUpdater$LuceneIndexAdaptor.setIndexFile(DefaultIndexUpdater.java:645)
    at org.apache.maven.index.updater.DefaultIndexUpdater.fetchAndUpdateIndex(DefaultIndexUpdater.java:829)
    at org.apache.maven.index.updater.DefaultIndexUpdater.fetchAndUpdateIndex(DefaultIndexUpdater.java:156)
    at org.eclipse.m2e.core.internal.index.nexus.NexusIndexManager.updateRemoteIndex(NexusIndexManager.java:1140)
    at org.eclipse.m2e.core.internal.index.nexus.NexusIndexManager.updateIndex(NexusIndexManager.java:1084)
    at org.eclipse.m2e.core.internal.index.nexus.NexusIndexManager$1.run(NexusIndexManager.java:656)
    at org.eclipse.m2e.core.internal.index.nexus.IndexUpdaterJob.run(IndexUpdaterJob.java:72)
    at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)

之间的差异

Answer 1

在渲染数据之前转换数据。从外部源获取后，只需执行字符串替换即可将 替换为实际空间。您可以在服务器端或客户端执行此操作。服务器端可能是最好的，但这是一个基本的JavaScript解决方案：

var tds = document.querySelectorAll("td");
for (i = 0; i < tds.length; ++i) {
  tds[i].innerHTML = tds[i].innerHTML.replace(/&nbsp;/g, " ");
}

<table><tr><td>LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
</td></tr></table>

Answer 2

试试这个jsfiddle：https://jsfiddle.net/j6hpovbo/2/

在该解决方案中，不需要为.wrapme类提供样式属性。通过应用宽度，此问题将得到解决。

你如何包装内容？

2 个答案: