在窗口大小调整上展开/缩小表格单元格文本

时间:2017-12-01 08:17:04

标签: html css

我有2个单元格的表格行。在左侧单元格中,有很长的文本值。

我想在窗口大小调整时动态展开或缩小左侧单元格文本。左表格单元格应该有var app = angular.module('myApp', []); app.controller('MyController', function MyController($scope, $sce) { $scope.myText = $sce.trustAsHtml("My name is: <h1>John Doe</h1>"); });,之后文本应该保持不变。如果文本太长,它的末尾应该有<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> <div ng-app="myApp" ng-controller='MyController'> <p ng-bind-html="myText"></p> </div>省略号。

同时,右表格单元格应具有固定宽度,因为它包含具有可预测宽度的常规文本。

以下是使用容器处理此问题的示例:

max-width
...

1 个答案:

答案 0 :(得分:-2)

您可以使用text-overflow来实现此目标;

<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis dui ut odio tincidunt semper quis fermentum ligula. Donec pretium ac purus vitae efficitur. Nulla vitae ipsum semper, aliquet odio vitae, volutpat nisi. Curabitur efficitur ac lorem quis pharetra. Sed sit amet massa nulla.</div>

.text { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }