次の行でテキストを強制的に破る方法は？

Question

長い単語に問題があります。私の言葉は箱から出てきます。私はlksadlkasdjlaksdjasdasjdk-次の行優先>このよう jdlaskdaskldjasdkladja

任意の提案を動作するように、このワードlksadlkasdjlaksdjasdasjdklsajdlaskdaskldjasdkladja例えば持っているので、もし は、任意の解決策はありますか？

Answer 1

これを達成するには、またはoverflow-wrapを使用できます。さらに、あなたの読者に休憩を知らせるためにcss hyphensを追加してください。

オーバーフローラップ： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

ワードブレーク：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

注：単語全体場合はワードブレークとは対照的に、オーバーフロー・ラップでのみブレークを作成します。あふれさせることなく独自の行に配置することはできません。

ハイフン： https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

以下のどちらの例：

span { 
 
    background: #eee; 
 
    width:150px; 
 
    height:auto; 
 
    display:block; 
 
    margin-bottom: 1rem; 
 
} 
 

 
span:nth-child(1){ 
 
    word-wrap: break-word; 
 
    hyphens: auto; 
 
} 
 

 
span:nth-child(2){ 
 
    overflow-wrap: break-word; 
 
    hyphens: auto; 
 
}

<span>abcdefghijklmnopqrstuvwxyz</span> 
 
<span>abcdefghijklmnopqrstuvwxyz</span>

Answer 2

word-wrap: break-word;を使用すると、長い文字列を分割できます。

span{ 
 
    border:1px solid red; 
 
    width:50px; 
 
    height:50px; 
 
    display:block; 
 
    word-wrap: break-word; 
 
    overflow: hidden; 
 
}

<span>jhfhgfhfghdfghdgfdfgdfgdfgdgfdghdgfdgfdgfdgfcgfvchgchvhvhgvchghg</span>

Answer 3

あなたは*あなたは単語が分割したい*、あなたは「ソフトハイフン」を使用することができます知っている場合は、次の所望の位置にこのコードを挿入します。­

の場合コンテナが十分に広い場合、単語は1つとして表示され、そうでない場合は、ソフトハイフンで区切られます。

.a { 
 
width: 200px; 
 
border: 1px solid #ddd; 
 
} 
 

 
.b { 
 
width: 400px; 
 
border: 1px solid #ddd; 
 
}

<p class="a">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p> 
 
<p class="b">lksadlkasdjlaksdjasdasjdk&shy;jdlaskdaskldjasdkladja</p>

注：word-wrap: break-word;がありますが、短い単語も破損します。