Question

在 Fiddle link 中，您可以看到包含某些内容的图片。我想要的是.g_container li strong应该被动态宽度截断但现在它被隐藏了。它的宽度应该随着图像宽度而停止扩散。现在我被隐藏了，即使我使用文本溢出，(3 dots) ...也不可见：省略号

.g_container li strong {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 10px 4px !important;
    line-height: 30px;
    color: #000;
    text-transform: uppercase;
    height: 30px;
    overflow: hidden;
    width:100px; 
    text-overflow: ellipsis;
    white-space: nowrap;
    background:yellow;
}

在更大的分辨率下，Lorem ipsum文本（即黄色背景）看起来很好。但是对于较小的分辨率，文本不会被截断而是被隐藏。

我经历了许多与动态文本截断相关的问题，但没有任何与我的要求有关。

修改：

我有横向和纵向格式的图像，并且不知道图像的精确尺寸。对于ladscape图像，没有问题。但对于肖像，根据文字宽度，空白空间即将到来。有人可以帮我解决这个问题吗？

Answer 1

我认为你只需要添加

display: block

到.g_container li strong并改变

width: 100px

类似

width: 100%

这是updated fiddle

Answer 2

strong是一个内联元素。您需要将其设为inline-block或block级别。

.g_container li strong{
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 10px 4px !important;
  line-height: 30px;
  color: #000;
  text-transform: uppercase;
  height: 30px;
  overflow: hidden;
  width: 72px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: yellow;
  display: block;
}

Answer 3

你好，你可以试试这个

＆＃13;

.g_container li strong{
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  padding: 8px 10px 4px !important;
  line-height: 30px;
  color: #000;
  text-transform: uppercase;
  height: 30px;
  overflow: hidden;
  width: 3vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: yellow;
  display: block;
}

＆＃13;

css3支持在vw中给出宽度的强大功能

有关vw关注链接的更多详细信息，您可以参考或谷歌搜索

<强> https://css-tricks.com/viewport-sized-typography/

这是我匆忙尝试的内容，但是对于完美的修饰它可能会有很多变化

＆＃13;

.g_container {
	position: relative;
	margin: 25px auto 0px;
	padding-bottom: 25px;
	width: 96%;
	text-overflow: ellipsis;
	overflow-x: auto;
	white-space: nowrap;
}

.g_container *{
	/*white-space: normal !important;
	word-break: break-all;*/

}
.g_container li { display: table-cell; }
.g_container li:first-child .g_grid { margin: 0 15px 0 5px; }
.g_container li .g_grid {
	position: relative;
  background: #fff !important;
  height: 500px;
  max-width: 40vw;
  width: 30vw;
  border: 1px solid rgba(34,25,25,0.4);
  display: inline-block;
  vertical-align: top;
  text-align: center;
  overflow: hidden;
  background: #fff !important;
  margin: 0 18px;	
}
.g_container li .g_grid p, .g_grid .gmeta {	
	overflow: auto;	
	clear: both;
	display: block;
	white-space: normal !important;
	word-break: break-all;
}
.g_container li .g_grid p {
  height: 10em;
  overflow: hidden;
  text-align: left;
  padding: 0.5em;
  word-wrap: normal;
  word-break: break-word;
}
.g_container li strong {
	text-align: center;
	font-size: 13px;
	font-weight: bold;	
	line-height: 30px;
	color: #000;
	text-transform: uppercase;
	height: 30px;
    overflow: hidden;
	width:100px; 
    text-overflow: ellipsis;
	white-space: nowrap;
    background:yellow;
}
.g_grid .gmeta {
	text-align: right !important;
	color: #777;
	font-style: italic;
    padding-right: 4vh;
}

.gimgholder {
	position: relative;
    max-height:250px;
    max-width:250px;
	margin: 0 auto !important;
	background: #fff;
}

.g_container li .gimgholder img {	
	width : 80%;
	max-width: 100%;
}

＆＃13;

Answer 4

这对我有用

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

在父容器中添加position:absolute使其起作用。

通过CSS截断动态宽度（响应）的文本

4 个答案: