如何在特定位置包装时打破单词？
如何在特定位置包装时打破单词？
提问于 2018-07-30 03:50:20
我的索引页面的横幅中有一个长字，无法正确包装。我已经引用了教程但是我没有遇到过如何在屏幕尺寸过小时告诉浏览器放置中断的位置。
我不希望浏览器尝试确定破解单词的最佳位置，但我希望能够选择浏览器似乎无法理解的位置。
HTML：
//break between the words Super and Long.
<h1>ThisIsTheSuperLongWordThatNeedsToBeSplit</h1>
回答 1
Stack Overflow用户
发布于 2018-07-30 13:15:04
一种可能的解决方案，如果不使用脚本，并且因为我假设你可以控制代码，就是将这个单词包装成组，这里用span's 来完成，然后允许它在选定的位置中断，例如像这，使用Flexbox。
有了这个，当宽度足够宽时，它仍然会看起来像一个整体。
堆栈代码段：
h1.header {
display: flex;
flex-wrap: wrap;
}
.demo {
border: 1px dotted gray;
width: 500px;
}
.demo2 {
border: 1px dotted gray;
min-width: 700px;
}
.demo3 {
border: 1px dotted gray;
}
<div class="demo">
<h1 class="header"><span>ThisIsTheSuper</span><span>LongWordThatNeedsToBeSplit</span></h1>
</div>
<div class="demo2">
<h1 class="header"><span>ThisIsTheSuper</span><span>LongWordThatNeedsToBeSplit</span></h1>
</div>
<div class="demo3">
<h1 class="header"><span>ThisIsTheSuper</span><span>LongWordThatNeedsToBeSplit</span></h1>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001722
复制相关文章
相似问题