10

をサポートする要素の css を作成できるかどうかを判断しようとしていますword-wrap:break-wordが、分割が不可能な場合は、子の幅を取るために拡張されます。

<html>
  <style>
  .outer {
    background-color:red;
    word-wrap:break-word;
  }
  </style>
  <div class="outer">
    User generated content:
    <a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
    <table>
      <tr>
        <td>asdfasdfadsffdsasdfasdfsadfafsd</td>
        <td>asdfasdfadsffdaasdfassdffaafasds</td>
      </tr>
    </table>
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
  </div>
</html>

上記のサンプルでは、​​URL は適切に分割されていますが、ウィンドウがテーブルよりも狭くなると、テーブルと img が赤い外側の div をオーバーフローします。

外側の div を display:inline-block または display:table にすると、赤い外側の div が正しく展開されてコンテンツが含まれますが、ウィンドウが URL よりも狭い場合でも URL は壊れません。

これは WebKit (Android 上) で動作するために必要なだけで、可能であれば CSS のみ (Javascript なし) のソリューションを見つけようとしています。

4

5 に答える 5

8

必要なものを正しく理解していれば、必要なのはoverflow: autoon に設定されているだけ.outerです。例を次に示します: http://jsfiddle.net/hgLbh/1/ (サファリとクロムでテスト済み)。

アップデート：

スクロール関連のコメントの後、他のいくつかの解決策を試しましたが、それでも満足できるものを見つけました。汚いと前もって言っておきますが、絶対位置のコンテンツを処理でき、生成されたマークアップを複製しても構わないと思っているなら、うまくいくことを願っています（少なくとも私のローカルサファリではそうです）。

解決策は、コンテンツを複製し、新しいコンテンツを他の 2 つの div でラップすることです。そのため、HTML は次のようになります。

<div class="outer-fixed">
    <div class="just-a-helper-wrapper">
        ... user generated content
    </div>
</div>
<div class="outer">
    ... same user generated content
</div>

CSS の場合:

.outer,
.outer-fixed {
    background-color:red;
    word-wrap:break-word;
    position: absolute;
    left: 0;
    right: 0;
}

.outer-fixed {
    position: fixed;
    right: 0;
}
.outer-fixed * {
    visibility: hidden;
}

テキストノード（つまり、別のタグにないコンテンツ）を選択しないjust-a-helper-wrapperためにのみ必要であることを指摘したいと思います-たとえば、例の文字列はまだ表示されています。そのようなコンテンツが実際にない場合は、削除できます。outer-fixed *User generated content:

リンクは次のとおりです。http://jsfiddle.net/hgLbh/2/

于 2011-11-01T00:56:41.847 に答える
7

割り当てwidth: 100%;て使用するとtable-layout: fixed;、td セルがテーブルに収まるようになり、テキストの折り返しが可能になります。

  table {
        width:100%;
        table-layout:fixed
      }
于 2011-10-22T19:04:30.537 に答える
3

モバイルウェブキットについてはわかりませんが、これはChromeで機能しました

http://jsfiddle.net/HerrSerker/duDTz/1/

.outer {
    background-color:red;
    word-wrap:break-word;
    overflow:hidden;
  }

.outer table {
    width: 100%;
    table-layout:fixed
}

.outer * {
    max-width: 100%;
}
于 2011-10-29T14:59:22.403 に答える
2

サイズの計算を解読するのはかなり難しいと思いますが、CSS 仕様を見ると、私がやろうとしていることはおそらく不可能です。ここにいくつかの重要なビットがあります:

http://www.w3.org/TR/CSS21/visudet.html

置換されていないインライン要素のボックスのコンテンツの幅は、それらの中でレンダリングされたコンテンツの幅です。

したがって、含まれているボックスの背景を子の幅に合わせて拡大したい場合は、レイアウトがインライン書式設定コンテキストで計算されるようにする必要があるようです:

http://www.w3.org/TR/CSS21/visuren.html#normal-flow

インライン ボックスがライン ボックスの幅を超える場合、インライン ボックスは複数のボックスに分割され、これらのボックスは複数のライン ボックスに分散されます。インライン ボックスを分割できない場合 (例: インライン ボックスに 1 文字が含まれている場合、または言語固有の単語分割規則でインライン ボックス内の分割が許可されていない場合、またはインライン ボックスが nowrap または pre の空白値の影響を受ける場合) )、インライン ボックスがライン ボックスをオーバーフローします。

偉大な。ルール違反には、緊急時のラッピングの可能性も含まれていることを願っています。

http://www.w3.org/TR/2010/WD-css3-text-20101005/#word-wrap

このプロパティは、別の方法では分割できない文字列が長すぎてライン ボックスに収まらない場合に、UA が単語内で分割してオーバーフローを防ぐかどうかを指定します。

本当に役に立ちません。新しいドラフト仕様を見てみましょう:

http://www.w3.org/TR/css3-text/#overflow-wrap

'overflow-wrap: normal' 改行の一部ではない改行の機会は、'min-content' 固有サイズの計算時に考慮されません。

これはあまり明確ではありませんが、'min-content' 固有のサイズが改行の可能性を判断するために使用されるのと同じ計算と関係がある場合、私は運が悪いかもしれません。

結局、Javascript を使用してコンテンツを測定し、それをブロック コンテキストで表示するかインライン コンテキストで表示するかを決定しました。はぁ。

var messages = document.body.getElementsByClassName('mail_uncollapsed');

// Show overflowing content by setting element display to inline-block. This
// prevents break-word from being applied to the element, so we only do this
// if the element would overflow anyway.
for (var i = 0; i < messages.length; ++i) {
  var message = messages[i];
  message.style.display = 'block';
  var isOverflowing = message.clientWidth < message.scrollWidth;
  if (isOverflowing) {
    message.style.display = 'inline-block';
  }
}
于 2011-11-03T23:06:45.770 に答える
2

draevor が答えを持っているように思えますが、 の画面の中央にスクロール バーを表示したくないのではないかと思いますdiv。その場合、制限に応じて、これを試しdivてウィンドウを作成できます。

CSS

html {height: 100%}
body {overflow: auto; height: 100%; margin: 0;}
.outer {
    word-wrap: break-word; 
    background-color: red;
    overflow: auto;
    min-height: 100%;
}
于 2011-11-03T18:26:29.343 に答える