css 有没有办法在'inline-block'样式的标签旁边加上一个长短语< b>?

2w2cym1i  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(118)

我想在标签旁边 Package 长文本(在这种情况下,标签被用作标签。请看下面的代码更好地理解)这样一种方式,下一行开始的第一个字的长文本。

**注意:**我使用的是CSS框架Bootstrap。

第一个
我尝试将患者详细信息与标签(即b标签)对齐
在打印预览模式(ctrl + p)下,预期输出如下:

Patient Name     : A Looooooonnnnnngggggg     Patient ID    : 1
                   Naaaammmee
C/o-(Brought By) : P S S Raj                  Patient Gender: Male
Contact Number   : 90********                 Patient Age   : 18Yrs

Patient Address  : A Verrrrryyyyyyy Loooooooonnnnnggggggg
                   Addddddddddddddrrrrrrrrreeeeeeeeeesssssssssssssss

但是在打印预览模式(ctrl + p)下的输出有点不同,如下所示:

Patient Name    : A Looooooonnnnnngggggg          Patient ID    : 1
Naaaammmee
C/o-(Brought By): P S S Raj                       Patient Gender: Male
Contact Number  : 90********                      Patient Age   : 18Yrs

Patient Address : A Verrrrryyyyyyy Loooooooonnnnnggggggg
Addddddddddddddrrrrrrrrreeeeeeeeeesssssssssssssss

如上所示,我希望“患者姓名”和“患者地址”旁边的长文本换行,并从长文本的第一个单词下方开始新行。
我试着添加一些内联CSS到i标签,像position: absolute,但它只是不工作.任何想法?

zhte4eai

zhte4eai1#

是否有办法在“inline-block”样式的标记旁边换行一个长短语?

这是可能的,但不适用于当前的解决方案。
当前解决方案示例:<p><b class="patient-details">Contact Number </b>: 90********</p>
如果用段落(<p>) Package 标签(<b>),就不可能达到您想要的效果。这是因为<p>标签和许多其他物理对象都显示在一个称为“内容”的特殊容器中。(查看CSS Box Model
折叠时的任何长短语都将在内容中开始新行。通常,默认情况下,新行从左到右水平开始。(除非为特定语言(如阿拉伯语)指定)
你看到问题了吗:)?标签在内容里面,我们没有办法摆脱它。但是
有其他的方法
来重新创建你想要的文本 Package 。
一些值得注意的解决方案:使用CSS Grid Layout ModuleCSS FlexboxHTML Tables的经典用法(制作人员:David ThomasPeteJohannes)的组合,
关键是将标签与段落分开,以便定义新的物理内容。这样,只要标签的容器占据了可用空间,段落就不会干扰标签。
这是我的解决方案 (不是最好的,但它确实有效)
第一个

相关问题