スパンでどのように枠線を崩壊させるのですか？

このhtmlでtryitエディタを実行して結果ウィンドウを狭くすると（200pxのように）、ボーダーは複数の行を占めるので、境界内にあります。私はどのように境界を "倒す"ことができますので、スパンの周りに単一の（不規則な）境界線ができますか？ http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap スパンでどのように枠線を崩壊させるのですか？

私はフローを変更しようとしていません。私はあなたがハイライターのように "文章を強調表示"しようとしています。しかし、私も国境が必要です。しかし、私は、不規則な形の境界線を1つだけ必要とします。

現在の問題：

[この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>

EDIT固定スパン：

出典

2016-09-05 toddmo

だけ表示を追加します。ブロックを。あなたのCSSでそれが動作します – monikapatel

https://jsfiddle.net/yr6opzev/ – monikapatel

@モニカ、ありがとう、しかし私は流れを変更しようとしていません。私はあなたがハイライターのように "文章を強調表示"しようとしています。しかし、私も国境が必要です。しかし、私は、不規則な形の境界線を1つだけ必要とします。 – toddmo

使用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>

出典

2016-09-05 20:46:36

これはChrome、Safari、IE11 +ではうまくいきますが、Firefoxではそれほどうまくいきません。 – myf

確かに、これはFFの長年にわたるバグと思われます...何年も前に戻る。この仕様では、アウトラインは長方形ではないことが明らかです。 ; –

バグは2004年に戻ります：https://bugzilla.mozilla.org/show_bug.cgi?id=266122、現在の仕様はhttps://www.w3.org/TR/CSS22/ui.html#dynamic-outlinesです。 – myf

スパンでどのように枠線を崩壊させるのですか？

答えて

関連する問題