CSS宽度根据内容改变是在设计网页布局时经常遇到的问题。一般来说，我们希望文本、图片或表格等元素的宽度能够根据内容自适应，并且不会超出容器的宽度。为了解决这个问题，CSS提供了多种方式来控制元素宽度，下面我们来看一些常见的方法。
使用百分比设置宽度
最常见的方法就是使用百分比来设置宽度，例如：

p {
width: 50%;
}

这样设置后，段落的宽度将占据其父元素的50%。如果父元素的宽度改变了，段落的宽度也会相应地改变。
使用max-width和min-width
有时候我们需要限制元素的最小和最大宽度，以便更好地控制布局。可以使用max-width和min-width属性来实现，例如：

p {
max-width: 500px;
min-width: 200px;
}

这样设置之后，段落的宽度将在200px和500px之间变化。如果父元素的宽度小于200px，那么段落的宽度将被设置为200px。如果父元素的宽度大于500px，那么段落的宽度将被设置为500px。
使用inline-block或table-cell
inline-block和table-cell是两个非常有用的样式属性，它们可以让元素的宽度根据内部内容自适应。例如，我们将段落设置为inline-block或者table-cell样式：

p {
display: inline-block;
}

或者

p {
display: table-cell;
}

这样设置之后，段落的宽度将根据内容自适应。这种方法通常适用于容器宽度已经确定的情况下。
最后总结一下，以上这些方法都可以让元素的宽度根据内部内容自适应，但各自适用的情况不同。在实际使用中需要根据具体情况选用。如果遇到问题可以尝试多种方法来解决。