相关疑难解决方法(0)

不是最好的头衔,但无论如何......

我有一个带有max-width一些文本的元素.

如果文本长度超过一行,我得到这个:

----------------------------
|My text here, hello       |
|everyone!                 |
----------------------------

换句话说,它占据了最大的最大宽度,但由于单词向下移动,右侧有一个空的空间.

有没有办法让它发生这种情况呢？

---------------------
|My text here, hello|
|everyone!          |
---------------------

#tooltip
{ 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

基于这种风格,我希望我的工具提示缩小或增长以适应内容,低至50px或高达250px.但是,当内容换行到下一行时,max-width属性似乎超出了我的width属性.当句子末尾的单词很长时,它看起来像留下了一堆填充(见截图),这是一种美学的东西.这是正常的行为吗？

收缩包装div到一些文本是非常简单的.但是如果由于最大宽度(作为示例)文本换行到第二行(或更多行),那么DIV的大小不会缩小到新包装的文本.它仍然扩展到断点(在这种情况下为最大宽度值),在DIV的右侧产生相当大的余量.当想要使这个DIV居中以使包裹的文本看起来居中时,这是有问题的.它不会,因为DIV不会收缩到多行文本.一种解决方案是使用合理的文本,但这并不总是实用的,并且结果可能是可怕的,并且单词之间存在较大的间隙.

据我所知,没有解决方案可以将DIV缩小为纯CSS中的包装文本.所以我的问题是,如何用Javascript实现这一目标？

这个jsfiddle说明了它:jsfiddle.由于最大宽度,这两个词几乎没有换行,但是DIV不会缩小到新包装的文本,留下一个令人讨厌的右边缘.我想消除这一点并让DIV重新调整到包装文本大概使用Javascript(因为我不相信纯CSS中存在解决方案).

.shrunken {text-align: left; display: inline-block; font-size: 24px; background-color: #ddd; max-width: 130px;}

<div class="shrunken">Shrink Shrink</div>

我有几个divs都被设计为内联块,因此彼此相邻排成一排.这些div的大小max-width为140px,并包含导致它们的宽度变化到该大小的文本.

正如max-width你所期望的那样,在这个小提琴中展示的文字比财产更宽.问题是它似乎也迫使它的容器div停留在max-width,即使包装文本在技术上不需要那么多空间.

有没有跨浏览器,HTML/CSS的方法,一旦文本换行,将这些块"收缩包装"到它们的最小宽度？我知道我可以用适当放置的<br>s 强制它,但这些块应该包含用户输入的文本.

.block {
    display: inline-block;
    vertical-align: top;
    max-width: 140px;
    background-color: lightgrey;
    text-align: center;
}

<div class="block">A single line</div>
<div class="block">Two distinctively different lines</div>
<div class="block">A somewhat egregious demonstrative amount of text</div>