Question

我正在努力制作一张像这样的照片：

+-----------------------------------------------------------+
|   Short Title                                             |
| +-------------+                                           |
| |             |                                           |
| |             |                                           |
| |  (picture)  |                                           |
| |             |                                           |
| |             |                                           |
| +-------------+                                           |
|                                                           |
|                                                           |
+-----------------------------------------------------------+

+-----------------------------------------------------------+
| This is a much longer title (wider than the picture)      |
| +-------------+                                           |
| |             |                                           |
| |             |                                           |
| |  (picture)  |                                           |
| |             |                                           |
| |             |                                           |
| +-------------+                                           |
|                                                           |
|                                                           |
+-----------------------------------------------------------+

+-----------------------------------------------------------+
| This is a ridiculously long title - and who cares about...|
| +-------------+                                           |
| |             |                                           |
| |             |                                           |
| |  (picture)  |                                           |
| |             |                                           |
| |             |                                           |
| +-------------+                                           |
|                                                           |
|                                                           |
+-----------------------------------------------------------+

前两个很容易完成（在段落或跨度上）这个css：

.mydivclass > p {
    display: inline-block;
    text-align: center;
    text-overflow: ellipses;    /* what I would like to happen */
    min-width: 100px;           /* the picture width */
    margin-left: 10px;          /* the picture left margin */
}

将椭圆放在第一行的末尾是难以捉摸的。我知道多线夹紧是一个挑战，但我认为单线应该更容易。我使用只读输入字段玩了一下，但输入字段的灵活大小似乎有问题。

Answer 1

您可以使用＆＃34; CSS Grid＆＃34;完成你想要的布局。＆＃34; CSS网格＆＃34;是一个CSS内置网格系统。请参阅附件中的代码段。

＆＃13;

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  1fr
  1fr
  1fr
  1fr
  1fr
  ;
  grid-template-rows:
  80px
  150px
  200px
  ;
  grid-template-areas:
    "header header header header header header"
    "picture picture . . . ."
    "rest-of-area rest-of-area rest-of-area rest-of-area rest-of-area rest-of-area"
    ;
}

.header {
  grid-area: header;
  background-color: black;
  width: 100%;
  color: white;
  padding: 20px 0px 0px 80px;
  font-size: 150%;
}

.picture {
  grid-area: picture;
  background-color: lightgrey;
  margin: 10px 70px 0px 70px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

  <div class="wrapper">

<div class="header">Have a lot of text here is not a problem...</div>
<div class="picture"></div>

  </div>

</body>
</html>

＆＃13;

试图使一个居中 - 除非太长 - 一行，图片标题使用CSS

1 个答案: