Html 空格nowrap,但如果大于css中的最大宽度,则断线
我使用了Html 空格nowrap,但如果大于css中的最大宽度,则断线,html,css,whitespace,Html,Css,Whitespace,我使用了空白:nowrap,因此我的字符串将保留在一行中,但我还设置了最大宽度:100px,因为我希望字符串仅在超过最大宽度时才会断开,只有两个参数相互冲突才有意义。空白属性“压倒”了最大宽度属性,字符串保持在一行中 <div class="mydiv">this is my text</div> 我尝试了“玩”溢出包装属性,但也不起作用 如果我删除了空白属性,字符串将逐字断开,每个字都在新行中。这是因为元素的位置是绝对的 那么我该如何解决这个问题呢
空白:nowrap
,因此我的字符串将保留在一行中,但我还设置了最大宽度:100px
,因为我希望字符串仅在超过最大宽度时才会断开,只有两个参数相互冲突才有意义。空白
属性“压倒”了最大宽度
属性,字符串保持在一行中
<div class="mydiv">this is my text</div>
我尝试了“玩”溢出包装属性,但也不起作用
如果我删除了空白
属性,字符串将逐字断开,每个字都在新行中。这是因为元素的位置是绝对的
那么我该如何解决这个问题呢
如果我删除空白属性,字符串会逐字断开,每个字都在新行中。这是因为元素是位置:绝对的,我想
发生这种情况是因为左:50%
将元素的宽度限制为等于包含块宽度50%的最大宽度
添加一个负数右边距
,以避免此问题
.mydiv{
位置:绝对位置;
最大宽度:400px;
左:50%;
转化:translateX(-50%);
保证金权利:-50%;
边框:1px实心;
}
这是我的文本这是我的文本这是我的文本这是我的文本这是我的文本
似乎只要删除空白:nowrap
就能解决你的问题-100px以下不能换行,100px以上不能换行。请@HaoWuI再次阅读。。。还是不明白。为什么不直接删除它,这样当它达到100px
宽度时它会自动换行?CSS不可能。是的。不过,您可以尝试使用最大宽度的包装器,而不会丢失无包装。
.mydiv {
position: absolute;
white-space: nowrap;
max-width: 100px;
left: 50%;
transform: translateX(-50%);
}