文章/答案/技术大牛

发布

社区首页 >问答首页 >分词: pre标记内的分词失败

问分词: pre标记内的分词失败
EN

Stack Overflow用户

提问于 2019-05-07 22:17:39

回答 2查看 129关注 0票数 0

我为dataTable中的每一行弹出一个模式，如下所示：

<div id="verifyModal" class="modal">
  <div class="modal-content">
    <h2>Verify # <span id="verify-modal-id"></span></h2>
    <pre><code class="" id="verifyCode">
      hash = '<span class="break" id="verify-modal-hash"></span>'
...
</div>

verify-modal-hash的值根据行数据动态更新。问题是散列是一个非常长的字符串，它跨越了模式的宽度。我当前用于此模式的CSS：

pre code {
  font-size: 11px;
  display: inline-block;
  word-wrap: break-word;
}
span.break {
  color: red;
  display: inline-block;
  word-wrap: break-word;
}

我尝试了在其他类似问题中找到的答案，但到目前为止似乎没有一个有效。

html

css

word-wrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-07 22:47:48

尝试一下，更新了代码。

在css中更新pre标签，而不是使用浏览器给出的默认css来pre tag。

看一下下面的代码片段：

span.break {
  color: red;
  word-wrap: break-word !important;
  width: 100px !important;
  display: block !important;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

<div id="verifyModal" class="modal">
  <div class="modal-content">
    <h2>Verify # <span id="verify-modal-id"></span></h2>
    <pre><code class="" id="verifyCode">
      hash = '<span class="break" id="verify-modal-hash"> jgjjgjjgjgjgjgjgjjgjgjgjjgjgjgjgjjgjgjgjjgjgjgjgjgjgjgjgjjg</span>'
      </code>
      </pre>
  </div>

票数 1

Stack Overflow用户

发布于 2019-05-07 22:31:05

<pre>的默认浏览器样式为white-space: pre;，因此请尝试添加

span.break {
  white-space: normal;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56024666

复制

相似问题

问分词: pre标记内的分词失败
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分词: pre标记内的分词失败EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分词: pre标记内的分词失败
EN