我有一个指定宽度的div,但是里面的文字没有分解并相应地适合div。
这可能是一个错误的问题。如何使它适合div?
我认为完全不能完全贴合,至少可以根据宽度而非高度安装在div内。
的CSS
.limit{
width:50px;
}
HTML
<div class="limit">
<p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p>
</div>
答案 0 :(得分:26)
您所需要的只是word-wrap: break-word;
.limit{
width:50px;
word-wrap: break-word;
}
<div class="limit">
<p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p>
</div>
另一方面,如果您不想破解句子,您还可以使用overflow
属性设置为auto
或overflow-x: scroll;
- Demo
答案 1 :(得分:0)
修改了类限制。您可以在一行中显示整个文本。
CSS
.limit p {
overflow-x: scroll;
white-space: nowrap;
width: 50px;
}
答案 2 :(得分:0)
如果您正在寻找一种方法来调整div的字体大小以适合整个文本而不会出现断字或滚动的情况,则应使用JavaScript来检测文本是否溢出并根据需要调整字体大小:
function fitText(outputSelector){
// max font size in pixels
const maxFontSize = 50;
// get the DOM output element by its selector
let outputDiv = document.getElementById(outputSelector);
// get element's width
let width = outputDiv.clientWidth;
// get content's width
let contentWidth = outputDiv.scrollWidth;
// get fontSize
let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
// if content's width is bigger then elements width - overflow
if (contentWidth > width){
fontSize = Math.ceil(fontSize * width/contentWidth,10);
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize - 1;
outputDiv.style.fontSize = fontSize+'px';
}else{
// content is smaller then width... let's resize in 1 px until it fits
while (contentWidth === width && fontSize < maxFontSize){
fontSize = Math.ceil(fontSize) + 1;
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize;
outputDiv.style.fontSize = fontSize+'px';
// update widths
width = outputDiv.clientWidth;
contentWidth = outputDiv.scrollWidth;
if (contentWidth > width){
outputDiv.style.fontSize = fontSize-1+'px';
}
}
}
}
此代码是我已上传到Github https://github.com/ricardobrg/fitText/
的测试的一部分答案 3 :(得分:0)
您可以这样设置样式,这是非常简单的方法 看起来 4 是 Scrooled
#ol_list li {
width: 380px;
height: 80px;
background-color: silver;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 0.5cm;
border: 2px solid purple;
border-radius: 12%;
}
#ol_list li span {
display: block;
max-width: 370px;
max-height: 20px;
overflow-x:hidden;
}
<ol id="ol_list">
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>scrooled ghghghfghfjhfghghhfghhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhfghfghfghfghfghfghfghfhhh</span></li>
<li><span>text5</span></li>
</ol>
答案 4 :(得分:0)
您也可以以“ vw”为单位使用字体大小。
.limit {
font-size : 1.3vw;
}