ハイフンのような特殊文字の後に単語を破る方法( - ) -- html フィールド と css フィールド と text フィールド 関連 問題

How to break word after special character like Hyphens (-)












76
vote

問題

日本語

比較的単純なCSS:

 <コード> div {    width: 150px;  }  
 <コード> <div>    12333-2333-233-23339392-332332323  </div>  

文字列が width に制約されるようにする方法 150 のうち、 Hyphen

の新しい線に包みます。
英語

Given a relatively simple CSS:

div {    width: 150px;  }
<div>    12333-2333-233-23339392-332332323  </div>

How do I make it so that the string stays constrained to the width of 150, and wraps to a new line on the hyphen?

</div
        
       
       

回答リスト

72
 
vote
vote
ベストアンサー
 

ハイフンをこれで置き換えます:

<事前> <コード> &shy;

「柔らかい」ハイフンと呼ばれます。

 <コード> div {    width: 150px;  }  
 <コード> <div>    12333&shy;2333&shy;233&shy;23339392&shy;332332323  </div>  
 

Replace your hyphens with this:

&shy; 

It's called a "soft" hyphen.

div {    width: 150px;  }
<div>    12333&shy;2333&shy;233&shy;23339392&shy;332332323  </div>
</div
 
 
   
   
32
 
vote

すべての最新のブラウザの * (そしていくつかのhref="http://www.quirksmode.org/oddsandends/wbr.html" real="noreferrer">古いブラウザ、 <wbr> 要素は特定の点で長い単語を破る機会を提供するための完璧なツール。

そのリンクから引用する:

ワードブレーク機会(<コード> <wbr> )HTML要素は、ブラウザがオプションで行を壊す可能性があるテキスト内の位置を表しますが、そのラインブレイクルールはその場所でブレークを作成しません。< / P>

これは、それがOPの例で使用される可能性がある(または jsfiddle でそれを見ること)です。 ):

<事前> <コード> <div style="width: 150px;"> 12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div>

* IE9、IE10、およびChrome、Firefox、およびOperaの最新バージョン、およびSafari。

 <コード> div {    width: 150px;  }  
 <コード> <div>    12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323  </div>  
 

In all modern browsers* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.

To quote from that link:

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Here's how it could be used to in the OP's example (or see it in action at JSFiddle):

<div style="width: 150px;">   12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div> 

*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.

div {    width: 150px;  }
<div>    12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323  </div>
</div
 
 
17
 
vote

CSS3の一部として、まだ完全にサポートされていない、ですが、単語に関する情報を見つけることができます。 - ここでwrapping 。もう1つのオプションは、 WBRタグ、&amp;&amp;&amp;#8203;なしそのうちのどちらが完全に支えられています。

 

As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, &shy;, and &#8203; none of which are fully supported either.

</div
 
 
 
 
8
 
vote

あなたの例は、Google Chrome、Safari(Windows)、およびIE8で予想されるように機能します。テキストはFirefox 3とOpera 9.5の150pxボックスから分割されます。

追加的に<コード> &shy; は、次のようになるので、例では機能しません。

  • ワード侵入時ですが、単語断線ではない場合は、ハイフンを表示しない場合、または

  • 単語の破断ではなく、単語の破断時に2つのハイフンを表示する ブレークにハイフンを追加しているので

 

Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.

Additionally &shy; won't work for your example, as it will either:

  • work when word-breaking but when not word-breaking not display any hyphens, or

  • work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.

</div
 
 
8
 
vote

この特定のインスタンスでは(文字列にハイフンが入っている場合)このサーバー側にテキストを変換したいと思います:

<プリクラス= "Snippet-Code-HTML LANG-HTML Prettyprint-Override"> <コード> <div style="width:150px;"> <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span> </div>
 

In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

<div style="width:150px;">    <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>  </div>
</div
 
 
 
 
7
 
vote

あなたが正確に見たいものに応じて、<コード> hyphen 、<コード>、<コード>、<コード>、および/または<コード> zero width space の組み合わせを使用できます。

ソフトハイフンでは、ブラウザは単語ブレーク(ハイフンを追加)できます。 幅の狭いスペースで、ブラウザは(何も追加せずに)単語の破損を妨げることができます。

このように、コードが何かのようなものである場合:

<コード> <wbr>0

それからあなたのブラウザはこれを単語の中断なしで表示されます:

1111112222222-333333344444444-5555555

そしてこれはすべての可能な単語ブレイク:

111111-
222222-
-333333
444444-
555555

必要なオプションを拾うだけです。あなたの場合、4秒から5秒の間にあるかもしれません。

 

Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.

On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

Thus, if your code is something like :

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

then your browser will show this with no word-break :

1111112222222-33333334444444-5555555

and this will every possible word-break :

111111-
222222-
-333333
444444-
555555

Just pick up the option you need. In your case, it may be the one between 4s and 5s.

</div
 
 
   
   
2
 
vote

使用することができます:

<事前> <コード> word-break:break-all;

ex.

<事前> <コード> <div style='width:10px'>ababababababbabaabababababababbabababa</div>

出力:

<事前> <コード> abababababa ababababbba abbabbababa ababb

提供されていない幅や高さで配置されていない文章のない空き容量でも、単語または線をすべて破損します。あなたは幅や高さを提供する必要があります。

 

You can also use :

word-break:break-all; 

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div> 

output:

abababababa ababababbba abbabbababa ababb 

word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.

</div
 
 
0
 
vote

非破壊ハイフンはうまく機能します。

HTMLエンティティ(10進数)

<事前> <コード> &#8209;
 

The non-breaking hyphen works well.

HTML Entity (decimal)

&#8209; 
</div
 
 
0
 
vote

- の代わりに<コード> &hyphen; または<コード> u2010 。

また、ハイフン cssプロパティが not に設定されていることを確認してください none (デフォルト値はマニュアルです。 )

<コード> <wbr> は Internet Explorer ではサポートされていません。

 

Instead of - you can use &hyphen; or u2010.

Also, make sure the hyphens css property was not set to none (The default value is manual).

<wbr> is not supported by Internet Explorer.

</div
 
 
0
 
vote

これが役に立つかもしれないことを願っています

行を壊したい <br> (Break)タグを使用します。

 

Hope this may help

use <br>(break) tag where you want to break the line.

</div
 
 
0
 
vote

ハイフン文字の後0幅スペースを使用できます。

 <コード> div {    width: 150px;  }  
 <コード> <div style='width:10px'>ababababababbabaabababababababbabababa</div> 0  

ハイフンの前に改行が必要な場合<コード> <div style='width:10px'>ababababababbabaabababababababbabababa</div> 1 を使用します。

 

You can use 0 width space after hyphen character:

div {    width: 150px;  }
<div>    12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323  </div>

if You want line break before hyphen use &#8203;- instead.

</div
 
 

関連する質問

0  Text Invroid Android  ( Text invertion android ) 
誰もがAndroid の編集テキストの逆さまに書き込む方法を知っています ありがとう / minhaz ...

0  ActionScript 3、コンパイル時にファイルテキストを読みますか?  ( Actionscript 3 read file text at compile time ) 
フラッシュを1つのテキストファイルの内容を文字列に入れたり、少なくとも.swfに置くことがあるように、ユーザーはダウンロードする必要はありません。 ...

17  C ++ STD :: Stringでアクセントやチルダを削除する方法  ( How to remove accents and tilde in a c stdstring ) 
スペイン語にいくつかの単語を持つC ++の文字列に問題があります。これは私がアクセントやチルダを持つ言葉がたくさんあることを意味します。アクセントのないカウンターパートのためにそれらを交換したいのです。例:この単語を置き換えたい:「Había」がハビアのために...

2  正規表現と行の両方を印刷する±1±1:1 - ライナ  ( Printing both the matched line and lines %c2%b11 upon regex match 1 liner ) 
それ以降の行だけでなく一致した行も印刷することができますか?現在: <事前> <コード> perl -lane 'print if $F[3] > 100000 && $F[2] =~ /^C$/ && print $last; $last = $_' ...

0  MySQL:CHARからテキストフィールドタイプへの変換からのUTFデータの損失が可能ですか?  ( Mysql possible loss of utf data from char to text field type conversion ) 
私は外国語/語彙Webアプリケーションに使用するデータベースを持っていて、PhpMyAdmin(そしてもちろんPHP)を介してインターフェースしていました。私はチャールフィールドに入れられたアラビア語のテキストのための約千の行を持っていました。私は私のエントリ...

0  Python Tkinter arrowキーと同時に2つのテキストウィジェットをスクロールする  ( Python tkinter scrolling two text widgets at the same time with arrow keys ) 
2つのテキストウィジェットを持つGUIを構築しています。 (私はそれがそれに一つのものを持っていることを意味しますが、この質問のために2つのテキストウィジェットでそれを残すことができます。私がやりたいことは、1つのテキストウィジェットをarrowキーでスクロ...

1  文書、テキスト形式  ( Document text format ) 
私のプロジェクトには、さまざまな種類の文書(表形式データ、請求書、手紙、いくつかの額)のためのドキュメントエディタが必要です、そして私のタスクを匿名のテキスト形式とエディタを探しています フォーマットのようなMS Wordはありますか? 私はRTFを知って...

1  C#:正規表現はこれに何があるべきですか?  ( C what should the regular expression be for this ) 
多くの> ASN.1 パーサーをそこにあるが、かなり費用がかかるロットとそのように、私は自分のものを書いてしようとしています。 私はプレースホルダーA、B、C、Dのテキストを抽出するために、正規表現がC#?にあるものを抽出するために、正規表現のようなものです。...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

8  SWTで提出された複数行テキストでTabキーを使用してください。  ( Use tab key on a multiline text filed in swt ) 
「盗む」タブキープレスからのマルチラインテキストフィールドをどのように防止しますか? 私はウィンドウの要素間の間で循環するためにタブを使いたいですが、マルチラインテキストを入力すると、タブは「通常」キーになり、単にタブレータを入力しているテキストに挿入します。...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有