作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
block 在每个单词后换行,宽度限制为最长单词
我想要一个<p>
元素内有 1-3 个单词,因此每个新单词将占一个新行。理想情况下,我想做 <p>
元素与最长单词一样宽。我无法插入<br>
或其他html
,因为数据来自第三方 API。
目前我发现的唯一方法是修复 <p>
长度,但对于长单词,结果相当难看。
有 CSS 替代方案吗?干杯!
p {
max-width: 48px;
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
word-break: break-all
}
<p>extra super tag</p>
<p>extra tagverylong tag</p>
最佳答案
使用宽度:最小内容
p {
width: min-content;
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
<p>extra super tag</p>
<p>extra tagverylong tag</p>
使用 inline-block
获得更好支持的另一个技巧
p {
display:inline-block;
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
.main {
width:0;
}
<div class="main">
<p>extra super tag</p>
<p>extra tagverylong tag</p>
</div>
还有表格
:
p {
display: table;
width: 1px;
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
<p>extra super tag</p>
<p>extra tagverylong tag</p>
关于html - <p> block 在每个单词后换行,宽度限制为最长单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65373603/
在 Vaadin 7.0,显示时JavaBean Table 中的数据与 BeanContainer ,用新数据刷新表的正确方法是什么? 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先,我使用的是带有 Axis2 1.6.2 的 eclipse,我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3,现在,对于每个请求,它仅响应错误数量的参数(3 for 1)。不幸的是,它没有说明错误在哪里,并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀!