CSS：强制要换行的文本（仅由其中一个子元素定义元素宽度） [英] CSS: Force text to wrap (OR defining element width by only one of its children)

问题描述

好吧，对我来说这是一个奇怪的。这是我使用的HTML元素：

带有标题的照片。理想情况下，我希望它看起来像这样，通过纯CSS：

图片的父元素的宽度必须取决于图片的大小。

我可以更改所有我需要的标记。 （文本不是目前在自己的div，但它可以是如果必要的。）CSS中有任何方式来完成这个吗？我得到的印象是，我需要强制的文本尽可能包裹（这似乎不可能实现），或使整个元素的宽度只依赖于一个元素，忽略另一个（我从来没有听说过of before）。

是否有真正的方法？还是我需要使用魔法Javascript？ （JS解决方案相当简单，但相当不行...）

解决方案

查看这个伟大的文章关于处理带有图片的字幕场景的最佳方法。 p>

个人而言，这是其中一种情况，你必须吸取它，并与那些作品一起去。

Okay, this is a weird one to me. Here's the HTML element I'm working with:

A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:

The width of the image's parent element needs to be dependent on the image's size.

I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).

Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)

解决方案

Check out this great article on the best ways of handling the image-with-a-caption scenario.

Personally this is one of those cases where you gotta suck it up and go with that works.

这篇关于CSS：强制要换行的文本（仅由其中一个子元素定义元素宽度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！