0

.tree-element {
    background: rgb(247, 247, 247);
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
<div className={this.props.edit ? "" : "tree-element"} style={style}>
                <div
                    style={this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : '')) > 0 ?
                        {color: '#4a4293',
                        padding: "0 0 5px 25px",
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        fontWeight: 400} :
                        this.props.childrens ? (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0) ?
                        {padding: "0 0 5px 25px",
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        color: '#8b8b92',
                        fontWeight: 300} :
                        {padding: "0 0 5px 25px",
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        color: '#8b8b92',
                        fontWeight: 300,
                        position: 'relative',
                        left: -15} : {}}
                    onClick={ e => {
                        this.props.toggleNode(this.props.id, stateIsOpenNodeTree);
                    }}
                >
                    {
                        !((this.props.childrens && this.props.childrens.length > 0) || (this.props.users && this.props.users.length > 0))
                            ? ''
                            : this.props.opened
                                ? open
                                : (this.props.childrens && this.props.childrens.length > 0 || this.props.users && this.props.users.length > 0)
                                    ? close
                                        : ''
                    }

                    {this.props.edit ?
                        ''
                        :
                        <div
                            style={this.props.name ? this.props.name.length > 48? {paddingTop: 5, wordBreak: 'break-word', overflow: 'hidden', height: '35px'} :
                                {paddingTop: 5, wordBreak: 'break-word'} : ''}
                        >{this.props.type !== 'POSITION' ?
                            <IconGroup style={this.props.opened && (this.props.childrens.length || (this.props.users ? this.props.users.length : {}))>0 ? {color: '#4a4293',height: 20, width: 20, position: 'absolute', left: 25, top: 3} :
                                {color: 'darkgrey',height: 20, width: 20, position: 'absolute', left: 25, top: 3}}/> :
                            <Portfolio style={this.props.opened  && (this.props.childrens.length || (this.props.users ? this.props.users.length : {}))>0 ? {color: '#4a4293',height: 20, width: 17, left: 25, position: 'absolute', top: 3} :
                                {color: 'darkgrey',height: 20, width: 17, position: 'absolute', left: 25, top: 3}}/>}
                        <div className="text-max-line-2" style={{marginLeft: '25px'}}>{this.props.name}</div>
                            <div  style={this.props.name.length > 92 ? {display: 'block'} : {display: 'none'}} className="text-patch-tree-organization"></div>
                        </div>
                    }
                </div>
                <div
                    style={this.state.subdivision || this.state.position ?
                        {marginRight: 10} : {marginRight: 10}}
                >{this.props.edit ? "" : this.props.user_type ? EditEmployeeMenu(this.props.id) : EditNodeMenu(this.props.id, this.props.parent_id, this.props.elementId)}</div>
            </div>

введите сюда описание изображения

Нужно сделать так, чтобы элемент (три точки по середине) не двигался, а если текст заходит на его блок, то он скрывался и текст, который не влезает прятался и было отображены ... (три точки). text-overflow: ellipse я делал. В общем не знаю как сделать, что бы эти *** не двигались если заходит на их поле.

3
  • 2
    Покажите код html и css,
    – SnakeMS
    20 фев 2019 в 8:17
  • код добавил, но кажется я знаю в чем проблема, сейчас попробую.
    – Oleksey
    20 фев 2019 в 8:34
  • как вариант обернуть три точки в <span> и назначить ему свойство float:right
    – SnakeMS
    20 фев 2019 в 8:38

1 ответ 1

1

Надеюсь я правильно понял суть проблемы. Если вы хотите обрезать непомещающийся текст и добавлять в этом случае троеточие, то посмотрите на приведённый ниже пример.

.card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 2px 6px;
  width: 250px;
  border: 1px solid #ccc;
}

.card__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
  flex-shrink: 0;
}

.card__name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="card">
  <div class="card__avatar"></div>
  <div class="card__name">
    Пушкарёв Александр Александрович
</div>
</div>

Ключевой момент в том чтобы контейнеру в котором содержится текст требующий обрезки дать эти три свойства:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

А так же задать конкретную ширину контейнера чтобы браузер понимал в какой момент текст нужно обрезать и поставить троеточие. Можно ограничить сам контейнер с ФИО, а можно, как в примере выше ограничить родительский контейнер. Я дал ширину в 250px.

Надеюсь помог.

2
  • да, спасибо, но я уже сделал. Там короче было захардкожено, в общем я сделал по своему, но спасибо. При рефакторе использую данную подсказку :)
    – Oleksey
    20 фев 2019 в 12:37
  • Не за что :) Рад что сделал :)
    – Zdarova
    21 фев 2019 в 13:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.