Question

假设极端情况下我得到一个没有空格的长字符串而我想把它分成下一行，我怎么能这样做？ Currently it moves the whole string to the second line and then breaks on the third.我怎样才能使字符串在用户名之后立即启动，在该行的末尾中断，然后继续下一个2？

cascade={"persist"}

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  overflow-y: scroll;
  word-break: break-word;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
}

.username {
  font-weight: bold;
}

Answer 1

一种方法是使用textarea

＆＃13;

textarea {
  width: 200px;
}

＆＃13;

<textarea>dfhiasfausdhfuasdfasdufasfuadsfasudfads</textarea>

＆＃13;

Answer 2

使用类似：

p.test {
  word-break: break-all;
}

Answer 3

您需要更改#chat的CSS。你需要替换

word-break: break-word;

使用

word-break: break-all;

这样做的原因是，break-word的值word-break不存在。您将其与overflow-wrap混淆，的值为break-word。

overflow-wrap的值：

/ *关键字值* /
  overflow-wrap：normal;
  overflow-wrap：break-word;

/ *全球价值* /
  overflow-wrap：inherit;
  overflow-wrap：initial;
  overflow-wrap：unset;

word-break的值：

/ *关键字值* /
  分词：正常;
  断言：打破所有;
  断言：保持全部;

/ *全球价值* /
  分词：继承;
  分词：初始;
  分词：未设置;

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  word-break: break-all;
  overflow-y: scroll;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
}

.username {
  font-weight: bold;
}

<div id="chat">
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhspanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
</div>

Answer 4

首先，您将每个.message（p}包裹在span中。但是，span是一个内联元素，只能包含其他内联元素，但p是一个块级元素。因此，我建议删除其他span。

第二次，在.message上使用word-break: break-all代替word-break: break-word上的#chat（这是一个无效值），这应该可以解决问题：

＆＃13;

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  overflow-y: scroll;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
  word-break: break-all;
}

.username {
  font-weight: bold;
}

＆＃13;

<div id="chat">
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
</div>

＆＃13;

Answer 5

您可以将此css用于聊天：

$query = $qb->select($qb->expr()->substring("p.website",1,5).'AS country')
    ->from("AppBundle\Entity\Image" ,"p")
    ->where("p.aktuellste = 1")
    ->andWhere($qb->expr()->in('country=:country'))
    ->setParameter('country','de')
    ->orderBy('country','DESC')
    ->getQuery();

希望这有帮助。

如何打破长字符串并使其继续下一行？

5 个答案: