相关疑难解决方法(0)

自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:

问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.

RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.

严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").

有没有人有这个可行的解决方案？

如何显示长字符串,网站地址,字符或符号集以及自动换行符以保持div宽度？我猜各种各样的文字包装.通常添加一个空间有效,但有一个CSS解决方案,如自动换行？

例如,它(非常nastily)重叠的div,迫使水平滚动等wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以添加到上面的字符串中以便在div中的几行内或浏览器窗口中整齐地放入它？

可能重复:
CSS:如何强制将长字符串(没有任何空白)包装在XUL和/或HTML中

让我们说一个有以下代码:

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>

我道歉但堆栈溢出(根据预览)不会换行代码片段.

在大多数(？)情况下,以下内容将使包含长行文本的容器拉伸到其中包含的文本的整个宽度.

我们想根据父容器的css指定宽度(宽度:100px)强制执行换行符(甚至是中间单词).

这可能是通过我不知道的css标签吗？

IE6 +可比性,请加gecko/webkit/opera.

我正在使用 ReactJS 和名为 MaterialUI 的组件库。我的排版组件有问题。

发生的情况是，如果我写了一个长文本，它超出了它的容器并且不会换行：

import React from "react";
import { Redirect } from "react-router";
import { withRouter } from "react-router-dom";

import Container from "@material-ui/core/Container";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";

function Homepage() {
  return (
    <div>
      <React.Fragment>
        <CssBaseline />
        <Container fixed>
          <Typography variant="h1" component="h2" align="center">
            123 456 789 qwertyuiopasdfghjklzxcvbnm
          </Typography>
        </Container>
      </React.Fragment>
    </div>
  );
}

export default withRouter(Homepage);

在图像下方：

这发生在移动模式和桌面模式中。

你知道如何解决这种行为吗？如果已达到容器的最大宽度，我希望长词将在新行上拆分。

<div id="id_div_comments"><p>body4qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p></div><br/><br/>
</div>

css文件:

div#id_div_comments {
    width: 400px;
}

但是字符串/文本超出了分割宽度.当达到分区的宽度时,我该怎么做才能打破文本？

嗨我在我的网页上做评论框,以便我通过不允许用户输入空注释来对该评论框进行验证,并且评论sholud不大于255个字符它一切正常但是当我输入评论时这意味着

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaakjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

这个字符串溢出了注释框div,即它就像一条直线,我用过css属性overflow:auto; 但我需要的是它应该像这样显示.它应该拆分字符串

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaakjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

对于前:当我这样评论 The p element has both line boxes and a child box for the q element, which is a block-level element. The line boxes before the q are wrapped in an anonymous block-level box and so are the line boxes after the q. The resulting tree of boxes might be as fol

它恰到好处...它应该是这样的