容器宽度内的数据，同时保持其他CSS样式不变

hrysbysz 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(104)

我需要让数据在容器的宽度内。而其他的css样式保持不变。很难达到同样的效果。会很感激你的帮助。
同样的小提琴：http://jsfiddle.net/nco694Le/
Big word here以下超出容器宽度
Html：

<div class="container">
  <p class ="collapse">data1 <span class ="DataRightAlign"> small </span ></p>
  <p class ="collapse">data2 <span  class ="DataRightAlign"> small</span></p>
  <p class ="collapse">data3 <span  class ="DataRightAlign"> big word here</span></p> 
</div >

CSS：

.container{
  width: 110px;
  border-style: ridge;  
}

.collapse {
  display: flex !important;
  align-items: flex-end !important;
}

.collapse:after {
  content: '' !important;
  flex: auto !important;
  min-width: 24px !important;
  margin: 0 6px !important;
  height: 2px !important;
  color: lightgrey !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  background-image: linear-gradient(to right,currentColor 2px,transparent 1px) !important;
  background-size: 4px 2px !important; 
}

.DataRightAlign {
  flex: none;
}

.DataRightAlign:last-child {
  order: 1;
  text-align: right;
}

css

来源：https://stackoverflow.com/questions/76180169/data-inside-the-width-of-container-while-having-other-css-styling-intact

1条答案

按热度按时间

z3yyvxxp1#

下面是我提出的将数据放入容器中的解决方案。这只是增加container的width属性的问题。我还添加了一些填充物。

.container{
  width: 110px;
  border-style: ridge;
}

.collapse {
  display: flex !important;
  align-items: flex-end !important;
}

.collapse:after {
  content: '' !important;
  flex: auto !important;
  min-width: 24px !important;
  margin: 0 6px !important;
  height: 2px !important;
  color: lightgrey !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  background-image: linear-gradient(to right,currentColor 2px,transparent 1px) !important;
  background-size: 4px 2px !important; 
}

.DataRightAlign {
  flex: none;
  word-wrap: break-word;
  white-space: break-spaces;
  max-width: 30%;
}

.DataRightAlign:last-child {
  order: 1;
  text-align: right;
}

<div class="container">
  <p class ="collapse">data1 <span class ="DataRightAlign"> small </span ></p>
  <p class ="collapse">data2 <span  class ="DataRightAlign"> small</span></p>
  <p class ="collapse">data3 <span  class ="DataRightAlign"> big word</span></p> 
</div>

编辑：我已经将word-wrap和white-space属性添加到DataRightAlign以及显式的width属性。这个应该能用

赞(0）回复(0）举报 2023-05-08

我来回答

容器宽度内的数据，同时保持其他CSS样式不变

1条答案

相关问题

热门标签

最新问答