CSS 文本为 1 个订单项模仿两行
[英]CSS Text mimick two lines for 1 line items
问题描述
I am trying to have 1 Line Text be on the top line of two line text with the help of CSS or HTML-reconstruction (I am open to either).
我正在尝试借助 CSS 或 HTML 重建（我对两者都持开放态度）将 1 行文本放在两行文本的第一行。 I have tried with line height, yet that also spaces the two lines further apart... I cannot split the text in two span elements and just have a secondary empty span element for 1-line-items because the text is created dynamically in various languages so I have no way of knowing where it would break (because the font is also not monotype)我已经尝试过行高，但这也将两行分隔得更远......我不能将文本拆分为两个跨度元素，并且只有一个用于 1 行项目的辅助空跨度元素，因为文本是在各种动态创建的语言所以我无法知道它会在哪里中断（因为字体也不是单型）
Note: There are never more than 2 lines of text注意：文本永远不会超过 2 行
. .
Goal ->目标 ->
. .
. .
Reality ->现实 ->
.tiles { text-align: center; font-size: 20px; line-height: 30px; font-family: Arial, Helvetica, sans-serif; }.tile>div { display: table; width: 100%; height: 100%; overflow: hidden; color: #000; font-family: Arial, Helvetica, sans-serif; border-radius: 20%; border: #ccc solid 1px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,204,204,0.2) 100%); /* http://www.heropatterns.com/ */ /* background-color: #1e252e; background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0.622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6.622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%23384049' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); */ }.tile>div>div { display: table-cell; vertical-align: middle; }.tile { display:inline-block; margin: 40px; text-decoration: none; width: 180px; height: 180px; } a.tile { text-decoration: none; }.tile>div:hover{ box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2); }.tile>div { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }.tile.text { display: block; } @media only screen and (max-width: 500px) {.k-mobile.tile { width: 48vw; padding: 2vw; height: 44vw; margin: 0; } } @media only screen and (min-device-width: 500px) and (max-device-width: 1023px) {.k-mobile.tile { width: 24vw; padding: 1vw; height: 22vw; margin: 0; font-size: 15px; line-height: 18px; } }
<:DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="tiles"> <a class="tile" href="#/contracts"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text" style="/* height; 40px: */ /* display; inline-block: */">1 Line only</span></a><a class="tile" href="#/contracts/unsigned"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/sign"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/qa"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/archive"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">1 Line only</span></a><a class="tile" href="#/feeds"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px;"></div> </div> </div><span class="text">1 Line only</span></a> </div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-07-28 13:52:47
Was such a result necessary?这样的结果有必要吗？ I added flex rule and flex-wrap: wrap to .tiles class.我添加了flex rule和flex-wrap: wrap到.tiles class。
.tiles { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; font-size: 20px; line-height: 30px; font-family: Arial, Helvetica, sans-serif; }.tile>div { display: table; width: 100%; height: 100%; overflow: hidden; color: #000; font-family: Arial, Helvetica, sans-serif; border-radius: 20%; border: #ccc solid 1px; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(204,204,204,0.2) 100%); /* http://www.heropatterns.com/ */ /* background-color: #1e252e; background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0.622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6.622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%23384049' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); */ }.tile>div>div { display: table-cell; vertical-align: middle; }.tile { display:inline-block; margin: 40px; text-decoration: none; width: 180px; height: 180px; } a.tile { text-decoration: none; }.tile>div:hover{ box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2); }.tile>div { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }.tile.text { display: block; } @media only screen and (max-width: 500px) {.k-mobile.tile { width: 48vw; padding: 2vw; height: 44vw; margin: 0; } } @media only screen and (min-device-width: 500px) and (max-device-width: 1023px) {.k-mobile.tile { width: 24vw; padding: 1vw; height: 22vw; margin: 0; font-size: 15px; line-height: 18px; } }
<:DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="tiles"> <a class="tile" href="#/contracts"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text" style="/* height; 40px: */ /* display; inline-block: */">1 Line only</span></a><a class="tile" href="#/contracts/unsigned"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/sign"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/qa"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">First line here second Line</span></a><a class="tile" href="#/contracts/archive"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px:"></div> </div> </div><span class="text">1 Line only</span></a><a class="tile" href="#/feeds"> <div> <div> <div><img src="https.//image.flaticon.com/icons/svg/714/714820:svg" style="width; 56px: padding-bottom; 10px;"></div> </div> </div><span class="text">1 Line only</span></a> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在一行旁边居中放置两行文本，HTML/CSS - Centering two lines of text next to one line, HTML/CSS
CSS问题与文本之间的行距超过两行，即 - css issue with line spacing between text with there is more than two lines, ie7
带有两个文本行的响应式css圈 - responsive css circle with two text lines
同一行上的两个元素，多行上的文本 - Two elements on the same line, with text on multiple lines
仅使用css限制两行中的文本 - Restricting text in two lines using css only
CSS 使订单项文本换行 - CSS to make line items text wrap
CSS - 在同一行显示两个文本块 - CSS - display two text blocks on the same line
HTML / CSS表单（表）DOB行显示在两行上 - HTML/CSS Form (Table) DOB line showing on two lines
如何使用 css 为段落中的每一行文本放置行分隔符？ - How to put line separators for every lines of text in a paragraph using css?
引导程序将两行文本居中对齐 - Centering two lines of text next to one line,Bootstrap
相关标签