javascript - 我如何将文本发送到另一行，我先是图片，然后是文本。如果文字太长，我希望文字在第一行

编辑：我看到我提供了错误的小提琴，对不起人们。这是固定的。
抱歉，如果标题太长。我将在这里再次叙述。
我有一张桌子，在桌子里面，每个单元格都有图片和文字。如果文字太长，文字会在图片下方。该文本应位于该文本的第一行下方。如果这不可能，我想做一个替代方案

"white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;" if the text goes over 60.

这是我的代码，文本不足以使事情搞砸； https://jsfiddle.net/crs8yenu/164/

<h4 id="line">
        <a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.image}}" height="70" width="85"/><span id="title-font">
          aaaaaaaa</span></a>
        <span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
        <span class="discuss" style="color:red;"><a href="{% url 'post' post.slug %}" class="btn btn-info btn-sm">enter</a></span>

      </h4>

这里有足够的文字来弄乱https://jsfiddle.net/crs8yenu/166/

<h4 id="line">
        <a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.image}}" height="70" width="85"/><span id="title-font">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></a>
        <span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
        <span class="discuss" style="color:red;"><a href="{% url 'post' post.slug %}" class="btn btn-info btn-sm">enter</a></span>

      </h4>

最佳答案

我认为这就是您要寻找的。
我添加了一行CSS以该链接为目标，告诉它显示为内联块（以便我可以设置其宽度），然后为它提供max-width属性以限制宽度。

h4#line a:first-of-type{
    max-width:250px;
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

参见小提琴：https://jsfiddle.net/crs8yenu/167/

也可能是您要查找的内容-我没有将第一个链接显示为inline-block，而是将链接内的跨度（包含标题文本）设置为显示为inline-block，因此它恰好位于你的形象。接下来，我将其设置为vertical-align: top，使其与图像的顶部对齐，而不是与底部对齐（将要包装的文本提供给要包装的位置），然后给它一个max-width（以防止其无限扩展到右侧）和等于您在图片中设置的显式高度的max-height，以确保最终不会比图片高。

#title-font {
  display: inline-block;
  vertical-align: top;
  max-width: 100px;
  max-height: 70px;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

参见小提琴：https://jsfiddle.net/crs8yenu/169/

关于javascript - 我如何将文本发送到另一行，我先是图片，然后是文本。如果文字太长，我希望文字在第一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35909382/