Разрыв строки внутри реагирует - bootstrap название карты вызывает движение карты вверх - PullRequest
Новая
       44

Разрыв строки внутри реагирует - bootstrap название карты вызывает движение карты вверх

0 голосов
/ 02 мая 2020 
class AlbumEntry extends Component {
render() {
    return (
        <Card style={{ margin: '5px', display: 'inline-block', width: '250px', height: '500px' }}>
            <Card.Img variant="top" src={this.props.imgSrc}/>
            <Card.Body style={{display: 'inline-block'}}>
                <Card.Title> {this.props.albumTitle} </Card.Title>
                <Card.Text> {this.props.albumArtist} </Card.Text>
                <Button variant="primary">Go to Album </Button>
            </Card.Body>
        </Card>
    );
}

}

У меня проблема с разрывом строки внутри моей карты. Я пытаюсь перечислить ряд карточек на моей странице, каждая из которых имеет заголовок и текст, а также изображение. Я могу сделать так, чтобы карточки были одинакового размера, НО, если заголовок занимает больше 1 строки, он выталкивает эту карточку вверх, поэтому карточки не выстраиваются в ряд должным образом. Какие-нибудь советы?

1 Ответ

0 голосов
/ 02 мая 2020

Вы должны усечь свой текст. Вы можете сделать это с помощью. 

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Или вы можете использовать увеличение высоты карты, которая занимает высоту двух строк заголовка. 

class AlbumEntry extends Component {
render() {
    return (
        <Card style={{ margin: '5px', display: 'inline-block', width: '250px', height: '550px', maxHeight: '550px' }}>
            <Card.Img variant="top" src={this.props.imgSrc}/>
            <Card.Body style={{display: 'inline-block'}}>
                <Card.Title> {this.props.albumTitle} </Card.Title>
                <Card.Text> {this.props.albumArtist} </Card.Text>
                <Button variant="primary">Go to Album </Button>
            </Card.Body>
        </Card>
    );
}
}

Вам необходимо применить фиксированная высота, иначе ваши карты не будут в ожидаемом порядке.

...