使用css打破/包装一个长词[重复]

Posted 2023-05-07

【中文标题】使用css打破/包装一个长词[重复]

【英文标题】：breaking/ wrapping a long word using css [duplicate]

【发布时间】：2018-11-10 22:56:57

【问题描述】：

我有一个 div，它是页面的宽度。我希望这个 div 中的一个很长的单词被打破和换行，所以所有内容都显示在屏幕上并且不会溢出/宽度永远不会大于 100%。

我尝试过overflow-wrap: break-word;，但这似乎不起作用。

谢谢。

.container  max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; 

h1  text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

【问题讨论】：

您可能想看看this answer，因为它有两种不同的纯 CSS 解决方案。

您的容器的宽度从未设置过，因此不会破坏文字。

【参考方案1】：

您正在寻找 word-break 属性。

此外，如果您想控制单词在 html 中的中断位置，请查找 <wbr> 标记。

.container  max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; 

h1  text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
word-break:break-all;

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

【讨论】：

啊，在你 +1 之后一分钟：P

【参考方案2】：

您可以添加word-break: break-all;，但它会将内容推向左侧？

.container 
  max-width: 100%;
  margin: 0 20px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;


h1 
  text-align: center;
  font-weight: 800;
  padding: 0px 20px;
  color: #bec0ca;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.5rem;
  font-weight: 800;
  padding: 0px 40px;
  max-width: 100%;
  overflow-wrap: break-word;
   word-break: break-all;  

<div class="container">
  <h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

【参考方案3】：

  .container 
  width: 300px;
  background-color: red;
  overflow-wrap: break-word;
  word-wrap: break-word;

这应该可以达到你想要的效果:)

【参考方案4】：

信用 https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

JSFiddle

.css

.container  max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; 

h1  text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;

.breakword 

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    

.html

<div class="container breakword">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

【参考方案5】：

如果您想通过浏览器执行此操作，则必须将连字符添加到 auto 中。

如果你想手动操作 查看我的更新：

.container  

max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; 
border: 1px solid grey;



h1  word-wrap: break-word;
 /*you can split the words by the width of h1*/
  width:250px;

<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>

【讨论】：

您的 sn-p 事件不起作用？

完美运行 - 我会把它交给 jsfiddle jsfiddle.net/65g6ngpa/1

如果你只是想“包装” h1 -> 你应该把连字符：auto 给你 h1 css

即使在小提琴中它也不会按照操作的要求进行操作......

【参考方案6】：

根据 Mozilla 开发者参考：

overflow-wrap CSS 属性指定浏览器是否 应该在单词中插入换行符以防止文本 溢出它的内容框。

使用overflow-wrap并将属性值设置为“break-word”

【讨论】：

为什么要发布两个答案？只保留一份所需的详细信息

我本来打算把它贴在我上次的 cmets 中，但它是一个不同的答案。 A-duh......好吧我把它删掉