У меня есть тег span. Элемент td внутри таблицы. Я использую x-редактируемый компонент для формирования сетки. Как вы можете видеть в прикрепленном изображении, текст «OB1 Charity License1» выходит из тега. Любая помощь по этому поводу? Текст, выходящий из тега span
Проводка весь Div тег из HTML:
<div collapse="pnlRuleBasicInformation" class="panel-wrapper" >
<div class="panel-body" id="conditionTable" style="height:200px;overflow: auto;">
<table class="table table-bordered table-hover bg-white">
<tr style="font-weight: bold">
<td style="width:5%">Association</td>
<td style="width:10%">Condition Type</td>
<td style="width:70%" colspan="2">Condition</td>
<td style="width:5%">Soft/Hard</td>
<td style="width:5%">Active</td>
<td style="width:5%">Edit</td>
</tr>
<tr ng-repeat="condition in RuleCreator.Conditions">
<td>
<div ng-show="condition.showAssociation">
<span editable-select="condition.association" class="form-control" e-name="association" e-form="rowform"
e-ng-options="s.id as s.name for s in RuleCreator.Association">{{ RuleCreator.showAssociationName(condition) }}</span>
</div>
</td>
<td>
<!-- Personal, Educational -->
<span editable-select="condition.ConditionType" class="form-control" e-name="SelectedCondition" e-form="rowform"
e-ng-change="RuleCreator.ConditionTypeChange($data,condition.id)"
e-ng-options="s.id as s.name for s in RuleCreator.ConditionType">{{ RuleCreator.showConditionType(condition) }}</span>
</td>
<td style ="width:10%">
<div class="col-lg-1" ng-show="condition.IsConditionTypeSelected">
<span editable-select="condition.conditionOption" class="form-control" e-name="conditionOption" e-form="rowform"
e-ng-change="RuleCreator.ConditionChange($data,condition.id)"
e-ng-options="ddlConditionOptions.id as ddlConditionOptions.name for ddlConditionOptions in RuleCreator.Condition">{{ RuleCreator.showCondition(condition) }}</span>
</div>
</td>
<td><!-- Age -->
<div class="col-lg-8" ng-show="condition.IsConditionSelected">
<table>
<tr>
<!-- is greator than, etc -->
<td style="padding-right:10px" ng-repeat="c in condition.AvailableControls">
<!--<span ng-if="c.ControlType == 'DropDown' || c.ControlType == 'Textbox'">{{c.type}}</span>-->
<span style="display:block" ng-if="c.ControlType == 'DropDown'" e-name="optionId_{{c.id}}" class="form-control"
editable-select="condition.optionId_{{c.id}}" e-form="rowform"
e-ng-change="RuleCreator.setDependentControl($data,condition.id, c.id)"
e-ng-options="ddlOptions.id as ddlOptions.name for ddlOptions in c.Options">{{ RuleCreator.showOptionName(condition,c.id) }}</span>
<span ng-if="c.ControlType=='Textbox'" editable-text="condition.valueEntered" e-name="valueEntered"
e-form="rowform">{{ condition.valueEntered || 'empty' }}</span>
</td>
</tr>
</table>
</div>
</td>
<td>
<span editable-select="condition.stopOption" class="form-control" e-name="stopOption" e-form="rowform"
e-ng-options="ddlstopOptions.id as ddlstopOptions.name for ddlstopOptions in RuleCreator.StopOption">{{ RuleCreator.showStopOption(condition) }}</span>
</td>
<td>
<span editable-checkbox="condition.IsActive" class="form-control" e-form="rowform" e-name="IsActive">{{(condition.IsActive==true?'Yes':'No')}}</span>
</td>
<td style="white-space: nowrap">
<!-- form-->
<form editable-form="" name="rowform" onbeforesave="RuleCreator.saveCondition($data, condition.id)"
ng-show="rowform.$visible" shown="RuleCreator.inserted == condition" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">
<em class="fa fa-save"></em>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel();RuleCreator.ConditionAddEditMode = false;" title="Cancel"
class="btn btn-sm btn-default">
<em class="fa fa-times"></em>
</button>
</form>
<div ng-show="!rowform.$visible" class="buttons">
<button ng-click="rowform.$show();RuleCreator.ConditionAddEditMode = true;" title="Edit" class="btn btn-sm btn-info">
<em class="fa fa-pencil"></em>
</button>
<button ng-click="RuleCreator.removeCondition($index)" title="Delete" class="btn btn-sm btn-danger">
<em class="fa fa-trash"></em>
</button>
</div>
</td>
</tr>
</table>
</div>
</div>
Каков конкретный эффект, который вы хотите достичь, который не достигнут сейчас? – RickyTomatoes
Текст «Благотворительная лицензия OB1» должен быть размещен как «Благотворительность» (второй слева). – TechTurtle
Уместно, как это сделать, если поле будет расширяться, чтобы оно соответствовало тексту, или текст должен быть обрезан в квадрате. Как макет реагирует на изменение размера окна в первом сценарии? ящики ломаются на вторую строку, когда они слишком широки, чтобы вписаться в область просмотра? Этот вопрос требует гораздо больше деталей и вашего фактического CSS, чтобы получить полезный ответ. – RickyTomatoes