Tengo un intervalo dentro de un <h3> que se ajusta a la siguiente línea una vez que el texto se vuelve demasiado largo. Necesito que el texto de la descripción permanezca en la primera línea con .title y overflow:hidden. La descripción debe alinearse a la derecha, el título debe alinearse a la izquierda.

Este patrón de diseño se utiliza en toda la aplicación, por lo que cambiar los elementos html en sí es un último recurso. Me gustaría resolver esto con una solución CSS simple si es posible. He estado probando todas las combinaciones de overflow, text-overflow y white-space que se me ocurren sin suerte. ¡Gracias!

JSFiddle

.title {
  background-color: lightblue;
  color: green;
}
.description {
  float: right;
  font-weight: bold;
  color: black;
}
Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>
1
Kenji 29 ene. 2016 a las 01:13

3 respuestas

La mejor respuesta

Puede configurar .title en white-space:nowrap + display:table.

.title {
  white-space: nowrap;
  display: table;
}
.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  display: table;
}
.description {
  font-weight: bold;
  color: black;
}
Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

Editar 1: si desea ocultar el texto adicional, puede usar white-space:nowrap + overflow:hidden.

.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  overflow: hidden;
}
.description {
  font-weight: bold;
  color: black;
}
Long:
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
</div>

<br>

Short:
<div class="container">
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>

Editar 2: si necesita que el texto corto se expanda y haga coincidir el texto largo sin texto oculto, puede usar white-space:nowrap + display:table-row. Tenga en cuenta que es necesario ajustar el marcado ligeramente: combine los dos contenedores en uno.

.title {
  background-color: lightblue;
  color: green;
  white-space: nowrap;
  display: table-row;
}
.description {
  font-weight: bold;
  color: black;
}
<div class="container">
  <h3 class="title">
    title
    <span class="description">descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span>
  </h3>
  <h3 class="title">
    title
    <span class="description">description</span>
  </h3>
</div>
2
Stickers 29 ene. 2016 a las 02:09

Pangloss me puso en el camino correcto, aquí está el CSS que terminó funcionando para mí.

.description {
  text-align: right;
  width:100%;
  overflow:hidden;
  font-weight: bold;
  color:black;
}
.container {

}
.title {
  background-color:lightblue;
  color:green;
  display:flex;
  white-space:nowrap;
}
0
Kenji 28 ene. 2016 a las 22:38

overflow: hidden; solo funcionará si el div tiene un ancho establecido. Puede establecer un ancho en el div para que sea 100vw o una cantidad establecida de px y luego puede usar su white-space: nowrap; y 'overflow: hidden; `juntos.

.title {
  background-color: lightblue;
  color: green;
  width: 100vw;
  overflow: hidden;
  white-space: nowrap;
}

.description {
  font-weight: bold;
  color: black;
}
0
mhodges 28 ene. 2016 a las 22:31