主页 / 问题 / 1384041
Accepted
Frontender
Asked:2022-07-20 18:42:27 +0000 UTC2022-07-20 18:42:27 +0000 UTC

如何在 CSS 的新行上拼写一个很长的单词？

  • 772

有一个文本块，其中包含一个长词。

在此处输入图像描述

如何使用 CSS 将这个单词一个字母一个字母地移动到一个新行，这样单词就不会超出块？

css

3 个回答

  1. 在包装库存的样式中，使用 word-wrap: break-word;

    • 1

  2. 带宽度：数字；例如：

    p{
   width: 300px; /*То есть строка будет до 300 пикселей*/
}

    或者

    
<p style="widht: 300px;">
</p>

    您也可以使用<wbr>- 换行。在这里阅读更多

    • 0
  3. Best Answer

    使用分词属性，有几个属性，链接有例子和描述。

    ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}

ul li {
  word-break: break-all;
}
    <ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

    要制作包装咒语，请使用word-break: break-all;

    您还可以通过切断“爬出”文本并在视觉上（通过省略号）使用text-overflow属性标记“文本的延续”来限制文本。

    ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}

ul li {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
    <ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

    • 0

相关问题