Question

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

"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>

这里; s有足够的文字来搞砸了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>

Answer 1

我认为这是你正在寻找的东西。我添加了一行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，而是在链接中设置范围（包含您的标题文字）以显示为{{1所以它会很好地放在你的图像旁边。接下来我将它设置为inline-block，以便它与图像的顶部而不是底部对齐（将包装文本放在某处包装），然后我给它一个vertical-align: top（以防止它从无限扩展到右边）和max-width等于你在图像中设置的显式高度，以确保它不会高于图像。

max-height

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

如何将文本发送到另一行，我有一张图片然后发短信。如果文本太长，我希望文本在第一个文本行下面

1 个答案: