25

現時点では TEST TEST が並んで表示されます。1 つを 2 行目に押し下げるにはどうすればよいですか? CSSのみ。

<div id="box"><p>TEST TEST</p></div>

#box{
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
4

7 に答える 7

30 
<html><head>
<style>
#box {    
    width:5px;
    display:table;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style></head>
<body>
<div id="box">TEST TEST</div>
</body>
</html>
于 2013-09-19T10:12:31.533 に答える
24

要素が常に 1 行に 1 つの単語を表示するようにしようとしていると仮定すると、CSSword-spacingプロパティを使用できます。

jsFiddle デモ

#box {
    word-spacing: 30000px; 
}
  • PS - このプロパティを非常に大きな値 ( 32767pxonChrome 29.0.1および無限値 on FF23) に設定しても、同じように機能します。そうすれば、コンテナの幅と結合しません。
于 2013-09-19T10:12:05.777 に答える
9

要素の幅を設定すると、要素内のテキストが自動的に分割されます

単語を分割するオプションもあります。これは次の方法で実行できます

ワードラップ: ブレークワード;

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

于 2013-09-19T10:10:28.567 に答える
3

私はこのようなことをします。

<h4>lorem ipsum 
  <span class="wrap-text">
    dolor site amet
  </span>
</h4>

.wrap-text{
     white-space: pre-line;
}

上記の提案の 1 つが pre-wrap を使用する理由がわかりません。プレラインの方が良いと思います。すべてのスペースとタブを無視しますが、ソース コードのハード リターンを尊重します。

したがって、コード内で 2 行目に折り返したい場所では、ハード リターンを実行します。

スパンクラスを配置するのが好きなのは、これを使用するとレスポンシブにすることができ、特定のビューポートサイズでのみラッピングをトリガーできるからです。例: @media (最大幅:768px)

于 2014-07-28T22:29:26.163 に答える
0

widthdiv 要素のを設定する必要があります。要素は自動的に新しい行にロールオーバーされます。

#box{
    width:20px; /* or a suitable width*/
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

ただし、高さは内容によって異なりますのでご注意ください。コンテンツの割り当てがある場合、要素の高さも増加します。

また、別のアプローチとして、親コンテナーの単語間隔を大きく設定することもできます。たとえば、次のようになります。

.parent {
  word-spacing:; 
}

また、各単語の後に単語の折り返しが強制されます。

于 2013-09-19T10:06:28.390 に答える
-4

シンプルです。単純に TEST<'br />CSS のみを使用して TEST を配置することは、"TEST" ごとに 1 つずつ、2 つのサブコンテナーがない限り不可能です。

于 2013-09-19T10:06:07.767 に答える