代码之家 › 专栏 › 技术社区 › Vignesh Subramanian

在bootsrap中添加空格pre后超出div的文本

css html

Vignesh Subramanian · 技术社区 · 7 年前

我有一个div,它将显示来自多行文本字段的内容

<div class="col-sm-12">
      <span class="description ng-binding">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Nam porttitor varius tortor..
      </span>           
</div>

description div有时需要显示多行文本。但它在一行中显示的内容忽略了下一行(新的)内容。所以我添加了下面的css

.description {
    white-space: pre;
}

添加后,它将以多行显示。但现在的问题是,如果行很大,那么它将超出父div,而不是包含在div中。

我试着按照建议添加下面的css here ,但没用

.description {
    white-space: pre;
    max-width: 98%;
    text-overflow: ellipsis;
    word-break: break-word;
}

我错过了什么?

1 回复 | 直到 7 年前

Vignesh Subramanian 7 年前

我把css从 white-space:pre 到 white-space:pre-wrap 而且成功了

.description{
    white-space: pre;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前