Question

我正在尝试使用jQuery编写一个“牢不可破”的类，所以：

<span class=unbreakable>
   some text in here 
   maybe with a <span title="tag">tag</span> or something
</span>

将每个空格替换为 。问题是，如果我做了类似

的事情

$(".unbreakable").html
(   replaceAll($(".unbreakable").html(), " ", "&nbsp;")
);

它也会替换标签中的空格 - 没有好处。所以我正在寻找一种方法来避免标签，而无需自己编写html解析器。有人知道这样做的好方法吗？

Answer 1

不会添加：

.unbreakable {
    white-space: pre;
}

...你的样式表更容易吗？

Answer 2

CSS的良好方向。 nowrap怎么样？

.unbreakable { white-space: nowrap; }

Answer 3

[edit]修复以回复评论。这可能与IE不兼容;还没有测试过Firefox之外的任何东西。 C.F. How do I select text nodes with jQuery。

<script language="JavaScript" type="text/javascript" src="jquery.js" ></script>
<link rel="stylesheet" href="styledButton.css" type="text/css" >

<script type="text/javascript">
  $(document).ready(function () {
    var NBSP = '\u00a0';
    $(".unbreakable").css("border", "solid red 1px").contents().each(function(x){
      if (this.nodeType == Node.TEXT_NODE) {
        this.nodeValue = this.nodeValue.replace(/ /g, NBSP);
      }
    });
  } );
</script>
</head>

<body>

<div id="log" style="width: 10px">
  <span class="unbreakable">testing <span title="Moo">XXX YYY</span> testing 1 2 3</span>
  <span class="breakable">(Now this is a breakable span)</span>
  <span class="unbreakable">testing again...</span>
</div>

<div id="A"></div>

</body>

如何在使用javascript修改dom时修改“文本”

3 个答案: