Question

如果您在此html上执行tryit编辑器并使结果窗口变窄（如200px），则边框位于跨度内，因为它占用多行。我如何“折叠”边界，以便它只是在跨度周围形成一个（不规则的）边界？ http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

我不想改变流程。我正试图像突击显示器一样“突出显示一个句子”。但我也想要一个边界。但我想要一个不规则形状的边框，而不是默认边框。

当前问题：

[别忘了用这个html替换编辑器html]

<!DOCTYPE html>
<html>
<head>
<style>
.test {
    width: 11em;
    border: 1px solid #000000;
    word-wrap: break-word;
border-collapse:collapse;
}
</style>
</head>
<body>

<p> <span class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

</body>
</html>

编辑固定范围：

Answer 1

使用outline代替border

.test {
  word-wrap: break-word;
  outline: 3px solid red;
}
p {
  width: 80%;
  margin: auto;
}

<p> You should know that <span class="test">this paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</span> The long word will break and wrap to the next line.</p>

你怎么让边界在一个跨度上崩溃？

1 个答案: