css自动换行：打破单词赢了工作

Question

我有两个内嵌范围。代码示例：

    <div class="comment_content">

        <span class="comment_author"><?= $child_comment['comment_author'] ?></span>
        <span class="comment_text"><?= $child_comment['comment_content'] ?></span>

    </div>

scss sample：

.comment_content {        
    word-wrap: break-word;
}
.comment_author {
    display: inline-block;
    vertical-align:top;
}
.comment_text {            
    display: inline-block;
    word-wrap: break-word;
    width: 100%;
}

如果我的预期观点必须是：

如果用户输入的字符串没有空格，则字符串不会中断。并打破设计：

如何正确打破长话？

Answer 1

要正确打破长词，需要结合多个CSS属性，我建议定义并应用这样的辅助类：

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

属性解释：

• overflow-wrap 和自动换行是aliases同样的事情，但有些浏览器支持一个而不支持另一个，所以我们都需要它们。他们 是正确的“正确”方式来打破单词，但它们对动态宽度的元素没有任何影响所以我们需要更多......
• 分词最初是为了要求使用CJK（中文，日文和韩文）文字的特定行为，但其作用类似于 自动换行，但在WebKit中，所有值都会破坏所有内容。出于这个原因，我们必须使用非标准和差 记录了仅限WebKit的断字值。
• 并且可选地，如果断言词有意义（即对于URL可能没有），我们可以在浏览器中使用超量词 支持他们（目前Firefox，Safari，Edge和IE 10+）。另请注意，在Firefox中，如果你有文字制动，那么大肆宣传不起作用 属性，所以除非你有固定宽度的容器，你必须在FF或传统支持上进行选择。

请注意，我省略了供应商前缀，但如果您不使用Autoprefixer之类的东西，那么这是完整的版本：

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Answer 2

使用word-break样式在单词中定义 where 以打破下一行。默认情况下，它使用空格或连字符，但您可以将其设置为cellForRowAtIndexPath以允许打破任何字母：

break-all

Answer 3

我觉得它会有所帮助。您必须指定width，特别是在您的情况下。

.comment_content{
  width:500px;
  border:1px solid #ccc;
}

.comment_author{
  width: 100px;
  float: left;
}

.comment_text{
  width: 400px;
  word-wrap: break-word;
  display:inline-block;
}

<div class="comment_content">

        <span class="comment_author">Hello</span>
        <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span>

    </div>

以下是实现您想要的工作示例：examples

Answer 4

我遇到了同样的问题，这里没有任何答案可以解决问题。

列出我正在使用的模板white-space: nowrap。使用white-space: normal删除或覆盖它可以使word-break: break-all或word-break: break-word正常工作。

也许这将有助于其他人搜索相同的问题。

Answer 5

您可以使用

word-break: break-all;

请参见此处的小提琴

fiddle

Answer 6

请在word-break: break-all;课程中使用.comment_content。